Question

我的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才能在视口中加载。关于我的问题的任何想法？

感谢

Answer 1

您遇到的问题是由于您使用JavaScript设置group_concat(ditinct(exams_scores.admission_no))和data-sizes属性这一事实。

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

您必须确保将加载jQuery，并且您的脚本将在data-srcset之前执行。

我无法保证以下任何建议都有用，因为此脚本无意使用。尽管如此，如果您确实想要使用您的问题中的jQuery脚本，请考虑以下事项：

从lazysizes lazysizes.js标记中删除async属性。
设置<script>
在加载jQuery之后立即运行你的脚本，在你放置脚本的位置并不重要，只要确保它在lazySizes和lazySizesConfig.preloadAfterLoad = true;之前执行。
只有完成上述所有操作后，lazySizes才会按预期延迟加载图像。

Answer 2

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

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

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

2 个答案: