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'/>

 

转载于:https://www.cnblogs.com/guangxiaoluo/p/3336503.html