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

Posted 2023-02-22

【中文标题】bLazy 和 Vue.js - DOM 准备得不够快

【英文标题】：bLazy and Vue.js - DOM not ready fast enough

【发布时间】：2016-04-30 21:22:46

【问题描述】：

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

【参考方案1】：

您可以尝试重新验证：“blazy.revalidate()”，在 fetch 函数之后。或者在“更新”中重新验证。我得到了帮助。

【参考方案2】：

使用Vue.nextTick。 Reference.

延迟回调在下一个 DOM 更新周期后执行

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

【参考方案3】：

我还在处理一个小型图片库，并在 div 上使用图片背景而不是 标签，因为它们可以更好地控制嵌套元素的定位并允许使用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 类中，让事情变得简单。它还可以通过在现有的 img 元素上设置 onload 侦听器、fadeIn 和 src 来适应 。

【参考方案4】：

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

只需添加脚本并添加类lazyload，同时使用data-src 而不是src，就完成了。

【讨论】：

它确实工作更稳定，谢谢！我仍然不得不使用 css 让它看起来不错，并使用 ajax 请求来避免空的 get 请求，但是你的脚本工作得非常好。谢谢，非常尊重！