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

【问题标题】：All images are loaded immediately with lazySizes plugin所有图像都使用lazySizes 插件立即加载
【发布时间】：2015-10-09 15:02:34
【问题描述】：

我对 Lazysizes 插件的动态集成有疑问。事实是当我加载页面（缓存禁用）时，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 在视口中加载。对我的问题有任何想法吗？

谢谢

【问题讨论】：

我不知道你的问题，但你试试$(document).ready(function(){...});和$(document).on("change","img",function(){...}); ???
目前我的脚本位于$(document).ready - 我需要脚本的响应部分的 src 属性的内容，但我意识到我想在页面加载之前将其删除。有一种混乱。也许我也需要编写一个 php 脚本，但我是这种语言的新手。

标签： javascript jquery html image lazy-loading

【解决方案1】：

您遇到的问题是由于您使用 JavaScript 来设置 data-sizes 和 data-srcset 属性这一事实引起的。

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

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

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

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

【讨论】：

所以我需要用像php这样的服务器端语言来编写我的脚本。对吧？
目前，我以与您描述相同的方式将 Lazysize 与 Jquery 一起使用。 Img 是延迟加载的，但我的脚本在页面加载后替换了 src 属性。这就是问题。我会试试php的方式...

【解决方案2】：

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

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

【讨论】：