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

Question

我对 Lazysizes 插件的动态集成有问题。事实上，当我加载页面(缓存禁用)时，src 的所有图像都加载了内容。在此之后，响应图像会像我想要的那样延迟加载。

我的反射(reflection):

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

这是我在页面底部的 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=="
    );
});   

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

谢谢

Answer 1

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

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

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

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

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