缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。若是一篇文章很长有不少图片的话，下载图片就须要不少时间。而这款插件，会检测你的滚动状况，只有你要看到那个图片的时 候，它才会从后台请求下载图片，而后显示出来。使用这个插件，能够在须要显示图片的时候，才下载图片，因此能够减小服务器的压力，避免没必要要的资源下载。 若是一我的不看下面的图片，那加载下面的图片就是一种浪费。

Lazy Load 插件原理

修改目标 img 的 src 属性为 orginal 属性，从而中断图片的加载。检测滚动状态，而后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效果。

可是如今，不少javascript大牛分析得出，这个插件其实并无真正的缓加载效果。确实是这样，官方也已经给出了说明和解决方法了。

问题缘由：在新版的浏览器中，即便你删除了 Javascript 控制的 src 属性，浏览器仍然会去加载这个图像。

解决方法：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。

例如：

<img data-original=“img/example.jpg” src=“img/grey.gif”>

 

这样咱们就须要先分析一下插件的优缺点，再决定是否要使用。

使用：

1. 必须按照这种结构才有实际做用，须要对输出进行定义。
2. 能够节约服务器资源，而且有较好的用户体验。
3. 若是图片很大，当用户滚动到目标位置，须要较长时间下载。

不使用：

1. 增长服务器压力，浪费系统资源。

究竟使用不使用，仍是要看你本身的实际需求。若是你图片比较少，就没必要使用了，若是你图片比较多，能够考虑一下。可是，使用的话，你可能须要把每一 个img 标签上本身加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。

 

开始使用 lazyload.js

第一步：加载相关文件。

很明显，你要加载jquery和这个插件。你可使用如下代码，加载这几个文件：

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

 

第二步：定义图片结构。

按照官方的建议，定义你的img结构：

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

 

第三步：触发这个插件，生效。

激活如下，你就能够在目标中使用了。

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

 

lazyload.js 高级使用方法：

下面部分来自官方文档，将官方文档进行了一下简单的翻译。

更周全的作法

咱们不得不思考这样一个问题。咱们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。若是用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么咱们的这个图像就没法显示出来。也就是说，若是没有 Javascript 的支持，咱们的图像就没法显示出来。

应对这个问题，咱们须要引入 noscript 标签。大致思路以下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。对现有图像，隐藏处理，使用 show() 方法触发显示。这样，若是浏览器不支持 Javascript，咱们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码以下：

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
<script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

 

提早加载

默认的状况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，而后再缓慢出现。若是你想在用户滚动以前，提早加载这个图像，你能够配置一下参数。

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

 

threshold 这个参数，就是用来提早加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。

自定义触发事件

默认的触发事件，是滚动，当你滚动的时候，就会检查而后加载。你可使用event属性，设置你本身的加载事件，以后你能够自定义触发这个事件的条件，而后去加载图像。

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

 

自定义显示效果

默认的图片实现效果，就是没有效果，下载完成以后，直接显示出来。这样的用户体验并很差，你能够设置 effect 属性，来控制显示图片的效果。例如

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

 

fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： effect demo page

把图像插入某个容器

你们若是使用智能手机的话，常常去应用网站下载应用，他们一般使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，咱们须要用css定义这个容器，而后用这个插件进行加载。效果： vertical

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

 

加载不可见图像

有部分图像是不可见的，咱们对其加上相似 display：none 等属性的图像。默认的状况下，这个插件是不会加载隐藏的不可见图像。若是咱们须要用它加载不可见图像，咱们须要将 skip_invisible 设置为 false

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