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

之前潘老师博客一直存在一个问题，就是访问首页时文章列表的缩略图一开始不会正常显示，原因在于模板开发者使用了基于jquery.lazyload.js的延时加载技术，但是在使用过程中配置出了问题，导致图片明明在可见区域却一直不显示，直到滚动栏往下滚动很多才会加载出来，所以潘老师就研究了下车，最终发现问题所在，并成功解决。

由于原始js是压缩版，还要格式化后调试才能看出在哪一行，通过浏览器F12疯狂调试，终于找到了延时加载的代码所在位置，F12调试图：

找到代码图：

后来经过一番查找，发现有一个属性对本问题影响很大，就是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 的作用就很大了，尤其是当你的网站布局很”变态”时,那可以把该值调得更高基本就可以解决问题了。