页面延迟加载之lazyLoad.js、echo.js（share）

一入前端深似海。图片延时加载实现起来并不是很难，但要是把涉及到的每一个点都说透的话，简直一天一夜都说不完。可是为什么要实现图片延时加载呢？

首先，做一个假设，假设浏览器是按顺序向服务器请求资源且一次只允许发送一个请求。那么当一个页面有很多张不同的图片，那么浏览器就要依次发送多个请求。恰好当请求的资源是一张很大的图片时，加载慢，那么后面资源的加载就会受到阻塞，也会影响到页面其他资源的加载，一次呈现给用户的内容也会很少。

所幸现代浏览器都支持并发请求。最新的浏览器对一个域名同时并发请求数达到了4到8个。这样即使第一个请求资源很大，那么浏览器在请求第一个资源的同时依旧可以向服务器发送请求加载后面的资源。这样页面的显示速度也会加快。

回过头来再想，如果一个网页比较长，用户仅仅在首屏停留且对第一屏以下的内容不感兴趣，那么加载首屏以下的内容无疑增加了带宽费用。对如淘宝、新浪等超大流量的网站这一点尤其重要。所以，图片延时加载便应运而生。

图片延时加载

图片延迟加载也称懒加载，通常应用于图片比较多的网页。页面初次加载时，只显示可视区域的图片，当页面滚动的时候，加载进入可视区域的图片，这样显著的提高了页面的加载速度，又不下载多余的资源节省了流量。同时更少的图片并发请求数也可以减轻服务器的压力。图片延迟加载的原理比较简单，先将图片的真实地址缓存在一个自定义的属性中，而src地址使用默认显示的图片来代替，在页面滚动时改变进入可视区域图片的src属性，重新去载入真正的图片。

关于图片延时加载，网上有很多应用的例子以及插件。目前研究过的两个插件分别是jquery插件lazyload。js和原生js插件echo。js。二者的区别不用说，jquery插件依赖于jquery库，使用的时候必须引入jquery才能使用，且该插件功能强大，灵活性也高。而echo。js是用原生写的插件，代码少，不依赖其他库，拿起来就可以用，但能够实现的效果不如lazyload丰富强大，但基本的延时加载要求都能满足。

点击这里查看echo.js图片延迟加载
 点击这里查看lazyLoad.js图片延迟加载

lazyLoad.js

如何使用?

延迟加载依赖于于jQuery，第一步引入文件:

< script src = " jQuery.js " > < /script>
< script src = " jQuery.lazyload.js " > < /script>

接下来修改html的一些属性。图像的src地址暂时存储在自定义属性data-original中。然后给需要延时加载图像加上一个特定的类，类的名字由你自己决定，使用的时候统一类名即可。为这些图片绑定延时加载。就像下面这样：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

用的时候就像下面：

$("img.lazy").lazyload();

所有 class 为 lazy 的图片将被延迟加载。　　

注意：必须设置图像的尺寸,宽度和高度属性或CSS。否则插件可能无法正常工作。

参数设置

设置阈值

默认情况下图片在位于可视区域后才开始加载。如果想提前加载图片, 可以通过设置 threshold 的值来改变其显示的时间, 设置 threshold 为 200 使图片在距离屏幕可见区域下方 200 像素时就开始加载。　　

$("img.lazy").lazyload({ threshold : 200 });

事件触发加载

默认是scoll事件触发延时加载。即等到用户向下滚动至图片出现在屏幕可视区域时图片才能加载。但可以使用jQueryclick或mouseover等事件触发图片的加载。也可以使用自定义事件。实现只有当用户点击图片图片才能够加载时可以这样写:

$("img.lazy").lazyload({
    event : "click"
});

　　注意：你也可以使用这个技巧延迟图片加载。即加载前延迟5秒后再加载图片。就像下面这样（trigger() 方法触发被选元素的指定事件类型）：

 $(function() {
    $("img.lazy").lazyload({
        event : "click"
    });
});
$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("click")
    }, 5000);
});

使用特殊效果加载图片

插件默认使用 show() 方法显示图片。当然你可以使用任何你想用的特效来处理。例如使用fadeIn效果：　　

$("img.lazy").lazyload({ 
    effect : "fadeIn"
});<、pre>

为非JavaScript浏览器回退

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example。jpg" width="640" heigh="480"></noscript>

可以通过 CSS 隐藏占位符。

.lazy {
  display: none;
}

在支持 JavaScript 的浏览器中，你必须在 DOM ready 时将占位符显示出来，这可以在插件初始化的同时完成。

$("img.lazy").show().lazyload();

这些都是可选的, 但如果你希望插件平稳降级这些都是应该做的。

图片内容器

可以将插件用在可滚动容器的图片上，例如带滚动条的 DIV 元素。将容器定义为 jQuery 对象并作为参数传到初始化方法里面。

#container {
    height: 600px;
    overflow: scroll;
}
$("img.lazy").lazyload({         
     container: $("#container")
});

当图像并不是连续的

　　滚动页面的时候, Lazy Load 会循环为加载的图片。在循环中检测图片是否在可视区域内。默认情况下在找到第一张不在可见区域的图片时停止循环。图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同。但是在一些布局中, 这样的假设是不成立的。不过你可以通过 failurelimit 选项来控制加载行为。

$("img.lazy").lazyload({ 
    failure_limit : 10
});

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索。如果你有一个猥琐的布局, 请把这个参数设高一点。

处理看不见图像

可能在你的页面上有很多隐藏的图片。为了提升性能, Lazy Load 默认忽略了隐藏图片。如果想要加载隐藏图片, 将 skip_invisible 设为 false：

$("img.lazy").lazyload({ 
    skip_invisible : false
});

echo.js

兼容性: Echo.js 使用了 HTML5 的 date 属性，并且需要获取该属性的值，所以它并不兼容 IE6、IE7。

使用方法

1、引入文件

<script src="js/echo.min.js"></script>

2、HTML

<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480">

blank.gif用做默认图片，data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度。

3、JavaScript

echo.init({
    offset: 0,
    throttle: 0
});

4、参数说明
echo.js只有两个参数：offset 和throttle.

offset: 设置图片在离可视区域下方在一定距离后开始被加载

throttle: 设置图片在等待时间后开始延迟加载。

那么上面的代码的意思就是一旦图片进入可视区域就立即加载。

怎么样，使用起来真的很简单是吧？

陈泽创