浏览器

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

Posted by

0

    提高页面加载速度的方法有很多种，这里推荐一种在页面图片较多的时，提高页面整体加载速度的方法–延迟加载(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