所有图像都会立即加载lazySizes插件

Question

我有一个问题与我的Lazysize插件的动态集成。事实是当我加载页面（缓存禁用）时，src的所有图像都加载了内容。在这之后，响应者图像像我想要的那样被懒惰加载。

我的思考：

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

下面是我在页面底部的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

1. 首先需要指定数据属性。
2. 加载超文本标记语言
3. 加载jQuery和lazysizes.js
4. 获取所有数据并保存在变量中
5. 用它处理

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

Answer 2

您遇到的问题是由于您使用JavaScript设置数据大小和数据集属性造成的。

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

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

我不能保证我下面的任何建议都是有用的，因为这个脚本不打算这样使用。不过，如果您真的想让它从您的问题中使用jQuery脚本，请考虑以下内容：

1. 删除lazysize中的async属性