正文
jquery图片延迟加载方案解决图片太多加载缓慢问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
当在做一个图片展示站的时候，一个页面加载的图片过多会，如果服务器的带宽跟不上，明显会感觉到页面很卡，严重的浏览器也会崩溃，所以我推荐采用即看即所得的模式，当滚动到下一屏时才进行加载图片。
注意：即便如此，也希望保持图片的大小不要太大，例如上传一个1M的图 在页面中显示，当有100张时，可想而知，100M的图片需要加载，所以推荐将图片进行裁剪或者压缩处理展示，特别是列表页！
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript" src="jquery.scrollstop.js"></script>
$(function(){
//延迟加载图片
$("img.lazy_load").lazyload({
event: "scrollstop", //滚动加载
effect : "fadeIn" //淡入
});
})
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
