利用jquery.lazyload实现懒加载

很多时候,为了服务器的网络等性能。在加载图片资源的时候,都会采取一种懒加载的方式,对图片进行按时按需加载。

很多时候,为了服务器的网络等性能。在加载图片资源的时候,都会采取一种懒加载的方式,对图片进行按时按需加载。


今天项目中,在有的需求需要加载大量的图片。极大地增加了服务器的网络压力。所以采取了懒加载机制,效果明显改善。


使用方法:


1、在页面中引入“jquery.lazyload.js”文件。

下载地址:http://plugins.jquery.com/lazyload/


2、在页面dom加载完成后对原来的img的src属性进行修改。

<script>
   $(document).ready(function(){
      $(".pic_word img").each(function(){
         if( !$(this).attr("data-original") ){
            $(this).attr("data-original", $(this).attr("src")).attr("src", "../images/loading.gif");}
         //将src赋值到data-original,src赋值为预先准备的loding.gif
      });
      $(".pic_word img").lazyload();
   });
</script>



3、还有其他很多功能,这里不累赘。

文章最后修改时间:2019年01月21日 17:41:52

ICP备案号:粤ICP备18068480号
Copyright © 林国来版权所有