记忆盒子

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

      这里介绍一个使用很广泛的插件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

广告

海外云主机

低至54元 - 可退款

立即选购 >

rxinyun

立即选购 >

标签: JavaScript  

※ 网站速度慢？试试网站自动优化工具 ※