Lazyload图片懒加载jQuery插件

Question

图片懒加载现在几乎所有的网站都有，算是一个非常热门的功能，因为他的用处非常大，凡是站长几乎都不会拒绝这个需求，实现图片懒加载的插件有很多，而且又是良莠不齐，写这篇文章就是给大家介绍，我认为最好用的图片懒加载插件。

Lazyload介绍

如今的带宽以及足够大了，但是对于网站而言，并不是这样，带宽依然是网站的瓶颈，而且现在网站的资源都是比较大的，例如一个图片网站，希望展示高清的图片给用户，就需要更大尺寸的图片，往往一个图集并不止一个图片，多个图片在一个页面展示。

访客打开网页的时候，浏览器会同时去请求这个图片，如果访问的用户多了，势必会造成服务器带宽堵塞，导致网页打开缓慢，这时候图片的按需加载就非常必要了，用户看到哪里就加载哪里的图片，而且可以有效的环境服务器带宽压力，减少服务器并发。

Lazyload 作为一个老牌的图片懒加载插件，几乎已经接近完美，能解决我们所能遇见的大多数问题，而且安装和使用都非常方便，推荐大家使用和推广，当然如果你的技术够硬，你可以自己写一个来满足你自己项目的需求。

安装Lazyload

你可以通过 bower 或者 npm 安装Lazyload 。

$ bower install jquery.lazyload
$ npm install jquery-lazyload

或者你跟我一样，根本就不知道上面的这些东西，那么还是老老实实的下载JS文件，然后引入到网页中，千万别忘记了 Lazyload 是依赖jQuery的，所以在引入 Lazyload 的时候还要先引入 jQuery 文件。

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

使用Lazyload

使用非常简单，这个插件没有Style样式，所以我们不需要配置和修改相关的CSS代码，使用总共分两步。

1、为图片加入样式 lazy 图片路径引用方法用 data-original，

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

这里注意，很多人第一次使用的时候没有修改图片的 src 属性，然后他通过控制台插件HTTP连接发现图片资源请求了两次，就说这个插件是假的，其实是他配置不对。

上面的 lazy 类并不是唯一的，只是为了方便查找到图片元素。

2、在网页加载完毕以后调用插件

$(function() {
     $("img.lazy").lazyload();
});

配置Lazyload

Lazyload有很多可以自定义的参数，来满足你项目的个性化需求，例如你可以修改图片显示的事件和方式，在没有加载图片的时候，显示一张占位图片告诉用户这里有一张图片。

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

设置图片显示的阈值

默认情况下，网页滚动到哪里，就显示哪里的图标，但是如果你希望图片早一点显示出来，你可以配置 threshold 参数，例如设置为 200，那么当用户滚动到距离图片还有 200 像素的时候，就开始加载图片并显示出来。

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

图片的显示事件

默认是自动显示，但是如果你的网站受到CC攻击，你可以要求你的用户点击图片再加载，那么你可以配置 event 参数，你可以使用jQuery事件如 click 或 mouseover。你也可以使用自定义的事件，如 sporty 或 foobar。默认是等待用户向下滚动，图像出现在视口上。只有当用户点击它们才能加载图像：

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

小技巧：您可以使用此技巧，如延迟加载图像。以下代码等待五秒后，其余的页面完成加载之前加载图像。看到它工作在延迟加载演示。

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

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

使用图片显示动画

默认情况下，插件等图像完全加载和调用 show()。你可以使用任何你想要的效果。下面的代码使用 fadeIn() 效果。检查效果如何在演示页。

$("img.lazy").lazyload({
    effect : "fadeIn"
});

兼容不支持JavaScript的浏览器

几乎每个人都启用JavaScript功能。但是如果你仍然想支持非JavaScript的用户，你可以在 <noscript></noscript> 标签里面包含真正的图片标签。

<img class="lazy" 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的浏览器必须启用显示占位符文件加载时。这可以在初始化插件时同时完成。

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

图片布局不连续

什么是图片布局不连续，就是假如你的网页是左右布局，然后左边有图右边也有图，但是滚动网页的时候，会优先显示左边的图，因为他的代码写在前面，而当把左边的图显示完以后，才会显示右边的图片。

滚动页面插件循环虽然卸载图像。循环检查图像是否已可见。默认情况下，当第一个外部视口被发现时，循环停止。这是基于以下假设。页面上的图像顺序与HTML代码中的图像顺序相同。一些布局假设这可能是错误的。你可以控制failure_limit设置加载行为。

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

设置 failure_limit 设置为 10 原因插件停止后发现10折叠的图片，图片加载搜索。如果你有一个时髦的布局设置这个数字高。最坏的情况是实际的图像数量。

相关链接

• Github地址：https://github.com/tuupola/jquery_lazyload
• 项目地址：http://appelsiini.net/projects/lazyload/