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

巴特西

jquery图片延迟加载方案解决图片太多加载缓慢问题

最新文章

热门文章