实用jQuery图片延迟加载预加载插件Lazy Load

版权所有,禁止匿名转载;禁止商业使用。

实用jQuery图片延迟加载预加载插件Lazy Load

实用jQuery图片延迟加载预加载插件Lazy Load,在网页上出现大量图片的时候,一下加载

全部图片需要加载比较长的时间,懒加载的目的就是减少加载时间,按需加载从而达到提升

用户体验的目的。

调用方法:

1.加载JS文件

<script src="http://www.js-css.cn/jscode/jquery.min.js"></script>//这里可以改成你自己的jQuery文件

<script src="js/jquery.lazyload.js?v=1.9.0"></script>


2.书写HTML

<img class="lazy img-responsive" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="665" height="474" alt="BMW M1 Hood">//src图片为预加载初始化图片


3.初始化函数调用

<script type="text/javascript" charset="utf-8">

  $(function() {

     $("img.lazy").lazyload({//指定ID

         effect : "fadeIn"

     });

  });

  </script>


0 0