我正在制作带有图片的简单画廊。我想用 bLazy plugin加载图像,一切正常,除了我想通过外部 JSON 文件加载图像列表并且由于图像元素创建速度不够快,所以当加载 bLazy 脚本时,它看不到图像是的。
如果我使用 setTimeout 它可以工作,但这是一种令人讨厌的做事方式...关于如何重构我的代码有什么想法吗?
请注意,它正在进行中,我稍后会使用路由器...
应用程序.js:
var allPics = Vue.extend({
el: function () {
return "#gallery";
},
data: function () {
return {
pics: {},
folders: {
full: "img/gallery/full_size/",
mid: "img/gallery/mid/",
small: "img/gallery/small/",
zoom: "img/gallery/zoom/"
}
};
},
created: function () {
this.fetchData();
},
ready: function () {
setTimeout(function () {
var bLazy = new Blazy({
});
}, 1000);
},
methods: {
fetchData: function () {
var self = this;
$.getJSON("js/gallery.json", function (json) {
self.pics = json;
})
}
}
});
var router = new VueRouter({
});
router.start(allPics, 'body', function () {
});
HTML:
<div id="gallery" class="gallery">
<div v-for="pic in pics.gallery" class="gallery_item">
<div class="img_div">
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src= "{{* folders.mid + pic.name}}"
alt="{{pic.alt}}" >
</div>
</div>
最佳答案
您可能想查看 https://github.com/aFarkas/lazysizes ,它会自动检测 DOM 更改,因此您无需执行任何 setTimeout
hack。
只需添加脚本并添加 lazyload
类,同时使用 data-src
而不是 src
即可。
关于javascript - bLazy 和 Vue.js - DOM 准备得不够快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34977835/