Question

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

Answer 1

您可能需要检查https://github.com/aFarkas/lazysizes，它会自动检测DOM更改，因此您不必执行任何setTimeout黑客攻击。

仅添加脚本并添加课程lazyload，同时使用data-src代替src，您就完成了。

Answer 2

我还在使用一个小图库，并在div上使用图像背景而不是＆lt; img＆gt;标签，因为它们提供了对嵌套元素定位的更多控制，并允许使用background-size: cover属性。

我做的预加载图像是这样的：

var imageUrl = ....
var img = new Image();
img.onload = function() {
    this.$els.divId.style.backgroundImage = "url(" + imageUrl + ")";
    $(this.$els.divId).fadeIn(1000); // fade in div using jquery
};
img.src = imageUrl;

这样当图像加载并在浏览器中缓存时，我可以淡入图像div以获得平滑效果。

请注意，divId元素从一开始就被隐藏（使用display：false），并且没有分配background-image属性。

在将imageUrl分配给img.src之前，也应该设置onload事件，这样如果图像已经被缓存，你就不会错过onload事件。

此功能也可以添加到mixin或utils类中，并保持简单。它还可以适应＆lt; img＆gt;通过在现有的img元素上设置onload侦听器，fadeIn和src。

Answer 3

使用Vue.nextTick。 Reference

将回调推迟到下一个DOM更新周期后执行

Vue.nextTick(() => {
    new Blazy();
});

Answer 4

在获取函数之后，您可以尝试重新验证：“ blazy.revalidate（）”。或者在“已更新”中进行重新验证。我得到了帮助。

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

4 个答案: