如何处理jquery加载插件时出现的懒加载
懒加载是网站性能优化的插件，可以提高用户体验。
页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。
1、引入jquery
2、引入jquery懒加载插件
<script type="text/javascript" src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js"
>
3、在需要懒加载的图片上添加如下：
";
src显示默认的图片
data-original为要显示的图片
4、启动懒加载
$("img.lazy").lazyload();
一般放在ajax complete中加载
细说jQuery如何实现懒加载
一、为什么需要懒加载？对于图片过多的使用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。二、懒加载的实现原理-它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,,等到此图片出现在视野范围内了，获取img元素，把src里的值赋给src。三、实现懒加载必备的知识点（一）获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内；Paste_Image.png function isShow($el){ var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度 if(top < scrollH + winH){ return true;//在可视范围 }else{ return false;//不在可视范围 } }（二）监听窗口滚动事件，检查元素是否在可视范围内; $(window).on('scroll', function(){//监听滚动事件 checkShow(); }) checkShow(); function checkShow(){//检查元素是否在可视范围内 $('img').each(function(){//遍历每一个元素 var $cur = $(this); if(!!isloaded($cur)){return;}//判断是否已加载 if (isShow($cur)) { setTimeout(function(){ showImg($cur); },300)//设置时间是为了更好的看出效果 }; }); }（三）元素显示的时候把之前的默认照片替换成src里的照片。 function showImg($el){ $el.attr('src', $el.attr('src')); $cur.data('isloaded',true); }Paste_Image.pngPaste_Image.png