图片延迟加载:lazyLoad.js

图片懒加载.

 　　　　在跟进公司先前的一个webApp项目的时候.其中一页面有较多图片,造成在移动终端加载图片的时候部分不显示.尝试解决,学习了懒加载.在网络上有许多例子,在这里根据自己的理解进行总结(有误之处请不吝惜赐教).

原理:

     页面在加载图片的时候,对于每一个不同的src都会发出一次http网络请求.而对于多个图片共用同一张图片的时候(src相同),则只发出一次请求.懒加载的原理就是利用这一点,先加载可视区域的图片,其余的部分通过隐藏或者占用某一共同的地址来减少对网络服务器的请求.当滚懂网页,刷新新的元素的时候,利用预存的lazy_src来替换原来的地址.这样,再第一次加载的时候就只加载文本内容和少量图片,在需要的时候再加载新的图片.

步骤:

 　　一.导入jquery.min.js

　　二.导入jquery.lazyload.js

　　三.在</body>前启用js脚本:

　　　　

1 $(document).ready(function(){

2 $("img").lazyload({

3                   effect : "fadeIn"  4                   });

5 

6 });
<!--以上将带img标签的元素执行延迟加载,效果为淡入(fadeIn).-->

    备注:body部分的img标签.这里懒加载时用:data-original的真实地址替换src

<img src="../images/o_loading.gif" data-original="../images/51.png"  style="display: block; "><br>

<img src="../images/o_loading.gif" data-original="../images/52.png"  style="display: block; "><br>

<img src="../images/o_loading.gif" data-original="../images/53.png"  style="display: block; "><br>

<img src="../images/o_loading.gif" data-original="../images/54.png"  style="display: block; "><br>

效果图:

 

更多内容请参考:http://www.appelsiini.net/projects/lazyload