一行JS代码实现页面图片延迟加载[jquery lazyload]

    提高页面加载速度的方法有很多种,这里推荐一种在页面图片较多的时,提高页面整体加载速度的方法–延迟加载(lazyload)。

    当一个页面图片较多时,页面整体的数据就会比较大,一次load完再展示,页面打开会显得比较慢,延迟加载就是在浏览器在解析HTML时不对图片进行加载,当页面打开后,监控滚动条对本屏图片进行逐个载入,这样可以将一个页面数据请求分散为多个,大大减少一次请求load数据的时间,从而提高页面的加载速度。
    借助 jquery lazyload插件可以轻松实现延迟加载,调用方式如下:
    引入jquery和jquery lazyload插件: 

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

图片标签处理:

<img data-original="img/example.jpg" width="640" height="480">
<!--
<img data-original="图片路径" width="640" height="480">
即把img标签src属性改为data-original
-->
    在页面加载完成后调用: 

<script>
 $(function() {
  $("img").lazyload();
  //加上淡出效果
  //$("img").lazyload({ effect : "fadeIn" });
 });
</script>
    下载地址:下载 
     转载请注明出处:怡然之乐 – FineYi
分享到: 更多

发表评论

电子邮件地址不会被公开。

*