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

我正在制作带有图片的简单画廊。我想使用bLazy plugin加载图像，除了我想通过外部JSON文件加载图像列表，并且由于图像元素创建的速度不够快之外，其他所有功能都可以正常工作，因此在加载bLazy脚本时，它可以看不到图像。

如果我使用setTimeout可以工作，但这是一种令人讨厌的处理方式...关于重构代码的任何想法？

请注意，它正在进行中，稍后我将使用路由器...

app.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黑客攻击。

仅添加脚本并添加类lazyload，因为还使用data-src而不是src，您已完成。