延迟加载插件Lazy Load

      如果一张网页有几十张甚至上百张图片需要展示,那么当打开网页时如果从头到尾不间断加载完,必定需要花费很长的时间,严重的情况还会导致网页停滞假死,这将给用户带来极坏的使用体验,因此需要解决这个问题。

      这里介绍一个使用很广泛的插件Lazy Load,Lazy Load是一个用JavaScript 编写的 jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。这个图片延迟加载插件,对于那些图片较多的长页面是非常有好处的。

      这是演示页面

      Lazy Load插件下载及使用方法

      Lazy Load插件包含两个js文件:

jquery.min.js
jquery.lazyload.js

      可以在这里下载:下载插件

      而使用方法也非常简单。

      1、在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定):

<script src=”js/jquery.min.js”></script>
<script src=”js/jquery.lazyload.js?v=1.9.0″></script>
<script type=”text/javascript” charset=”utf-8″>
$(function() {
$(“img.lazy”).lazyload();
});
</script>

      2、图片的html代码<img>标签需要这样写:

<img class=”lazy” src=”img/grey.gif” data-original=”img/bmw_m1_hood.jpg” width=”765″ height=”574″ alt=”BMW M1 Hood”>

      说明:

      ①:<img>里加上class=”lazy”

      ②:<img>里的src为一张预加载的图片,使用只有几十字节大小的圆点gif图片即可。

      ③:<img>里的data-original为真正需要显示的图片地址。

      ④:<img>里的alt为图片说明文字,在图片还没加载时显示。这个可有可无。

      Lazy Load插件其他功能

      Lazy Load插件还有其他的一些功能,例如淡入展示效果;事件触发加载,如click、mouseover;隐藏图片加载等,需要了解更多可以进入作者的网站:http://www.appelsiini.net/projects/lazyload