jquery lazyload图片延时加载在可见区域却不显示

Web前端 潘老师 1年前 (2020-08-13) 1090 ℃ (0) 扫码查看

之前潘老师博客一直存在一个问题,就是访问首页时文章列表的缩略图一开始不会正常显示,原因在于模板开发者使用了基于jquery.lazyload.js的延时加载技术,但是在使用过程中配置出了问题,导致图片明明在可见区域却一直不显示,直到滚动栏往下滚动很多才会加载出来,所以潘老师就研究了下车,最终发现问题所在,并成功解决。
jquery lazyload图片延时加载在可见区域却不显示
由于原始js是压缩版,还要格式化后调试才能看出在哪一行,通过浏览器F12疯狂调试,终于找到了延时加载的代码所在位置,F12调试图:
jquery lazyload图片延时加载在可见区域却不显示
找到代码图:
jquery lazyload图片延时加载在可见区域却不显示
后来经过一番查找,发现有一个属性对本问题影响很大,就是failure_limit 属性,将代码改为如下问题解决:

$("img").lazyload({
       //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)
       effect : "fadeIn", 
       //预加载,在图片距离屏幕180px时提前载入
       threshold : 180,   
       failure_limit:50 
 });

failure_limit 到底起了什么作用呢?

由于Lazy Load 有一个循环查找 img 的机制,根据 HTML 文档的布局从上往下查找,当找到第一个并未显示加载的 img时,就会停止往下查找。(其实就是对 $(“img”) 这个对象(组)进行顺序查找) 。

而现在网站设计时,都会用到大量的定位样式,如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异,这样就会存在一种情况,某 img 标签已出现在屏幕上,但它却无法显示! 因为它在 HTML 文档中的实际位置排在了那些还没有显示的img 标签后面, 这样会导致显示在屏幕上的这个img标签无法加载相应的图片。

当Lazy Load 在找到第一个未显示的 标签时,查找已经被终止了, 并没有继续往下遍历,这样就出现了我遇到的情况了,那解决办法也非常简单的,我们可以在原来的代码上直接把failure_limit属性加上,并把值设置的比较大,比如我的就需要设置到50,这样 Lazy Load 会查找到第50个未显示的标签处。当在图片多且布局复杂的页面时, failure_limit 的作用就很大了,尤其是当你的网站布局很”变态”时,那可以把该值调得更高基本就可以解决问题了。


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:jquery lazyload图片延时加载在可见区域却不显示
喜欢 (2)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!