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

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 修改。

只添加脚本并添加 class lazyload 也使用 data-src 而不是 src 就完成了。

Answer 2

我还在处理一个小型图片库，并在 div 上使用 image-background 而不是 < img > 标签，因为它们提供了对嵌套元素定位的更多控制并允许使用 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 事件。

此功能也可以添加到混合或实用程序中 class 并使事情变得简单。它还可以通过在现有 img 元素上设置 onload 侦听器、fadeIn 和 src 来适应 < img >。

Answer 3

使用Vue.nextTick。 Reference.

Defer the callback to be executed after the next DOM update cycle

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

Answer 4

您可以尝试重新验证："blazy.revalidate()"，在获取 function.Or 后在 "updated" 中重新验证。我得到了帮助。

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

bLazy and Vue.js - DOM not ready fast enough

javascript

jquery

json

vue.js

blazy