使用 lazySizes 插件立即加载所有图像

Question

我对 Lazysizes 插件的动态集成有问题。事实上，当我加载页面（缓存禁用）时，src 的所有图像都加载了内容。在此之后，响应式图像 lazy-loaded 就像我想要的那样。

我的反思：

我用一张小图片替换了 src 属性 - 但浏览器在用这个小图片更改 src 之前一直加载原始图片。
当页面加载时，所有图像都不会显示在视口中，因为我对每个图像都使用了填充比技巧。
我试图将我的脚本移动到页面的 header，但没有任何变化。

这是我的 jquery 脚本，位于页面底部：

//lazy init
window.lazySizesConfig = window.lazySizesConfig || {};
lazySizesConfig.loadMode = 2;   
lazySizesConfig.preloadAfterLoad = false;
$('img').addClass('lazyload');

$("img.lazyload").each(function() { 
    var src = $(this).attr('src').replace(/\.jpg$/i, "");
    $(this).attr("data-sizes","auto"); 
    $(this).attr("data-srcset", 
      src + '-240.jpg 240w,' + 
      src + '-360.jpg 360w,' + 
      src + '-480.jpg 480w, ' + 
      src + '-720.jpg 720w,' + 
      src + '-768.jpg 768w,' + 
      src + '-960.jpg 960w,' + 
      src + '-1280.jpg 1280w'
    ); 
    $(this).attr(
       "src",
       "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    );
});

我只想在视口中加载响应式 img。对我的问题有什么想法吗？

谢谢

Answer 1

您遇到的问题是由于您正在使用 JavaScript 来设置 data-sizes 和 data-srcset 属性。

lazySizes 脚本希望您在 HTML 输出中指定所有这些。

您必须确保 jQuery 将被加载，并且您的脚本将在 lazysizes.js 之前执行。

我不能保证我下面的任何建议有用，因为这个脚本不适合那样使用。不过，如果您真的想让它与您问题中的jQuery脚本一起使用，请考虑以下事项：

从 lazysizes <script> 标签中删除 async 属性。
设置lazySizesConfig.preloadAfterLoad = true;
运行您的脚本在 jQuery 加载后立即执行，无论您将脚本放在哪里，只要确保它在 lazySizes 之前和 $(document).ready().[=32 上执行即可=]
只有在完成上述所有操作后，lazySizes 才会按预期延迟加载图像。

Answer 2

您首先需要指定数据属性。
加载HTML
加载 jQuery 和 lazysizes.js
获取所有数据-并保存在变量中
处理它

我不知道 lazysizes.js 内部脚本是否有一些文档就绪函数或一些 DOM 更改嗅探器，但我认为你需要一种不同的方法。

使用 lazySizes 插件立即加载所有图像

All images are loaded immediately with lazySizes plugin

html

javascript

jquery

lazy-loading

image