javascript - bLazy 和 Vue.js - DOM 准备得不够快

Question

我正在制作带有图片的简单画廊。我想用 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>

Answer 1

您可能想查看 https://github.com/aFarkas/lazysizes ，它会自动检测 DOM 更改，因此您无需执行任何 setTimeout hack。

只需添加脚本并添加 lazyload 类，同时使用 data-src 而不是 src 即可。