Unveil.js 基于 jQuery 轻量级的图片懒加载插件

Question

Unveil.js 是一个图片懒加载（延迟加载）的 JavaScript 插件，可以基于 jQuery 或者 Zepto.js 使用，支持现代浏览器及 IE7+，Github上面有将近3K个Star(关注)，很值得使用和研究。

Unveil.js介绍

我们大多数人都熟悉 Mika Tuupola 的 Lazy Load 懒加载插件。这个插件是非常有用的，它提高了性能延迟长网页中的图像在图像加载因为视口（网页的可见部分）不会被加载到用户滚动到他们。

懒惰的负载有一些很酷的选项，如自定义效果、容器、事件或数据属性。如果你不想使用它们，你可以通过只留下基本代码来显示图像的大小来减少文件大小。我就是这样做的，这是我的轻量级版本延迟加载支持服务的高分辨率图像设备与视网膜显示器小于 1K。

使用Unveil.js

使用一个占位图或者是加载动画GIF替换掉IMG标签的SRC属性，然后将真实的图片地址填写到data-src中，这样当图片显示在用户视野中，Unveil.js会自动加载图片。

如果你想为高分辨率图像的视网膜显示设备，你就必须包括这些图像在data-src-retina属性中。

你不需要包括所有的图像标签data-src-retina属性，Unveil是足够聪明的后备data-src甚至什么都不做的情况下，没有任何data-src指定数据。

<img src="bg.png" data-src="img1.jpg" />
<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />

如果你关心的用户有没有启用JavaScript脚本功能，你可以在<NoScript>标签中加载原始图像：

<noscript>
  <img src="img1.jpg" />
</noscript>

在文档加载完毕以后，调用Unveil.js执行图片延时加载

$(document).ready(function() {
  $("img").unveil();
});

显示阀值

默认情况下，当用户滚动到图片的位置的时候，图片才会被显示出来。如果你想让你的图像更早的加载，让用户感觉不到加载和等待的过程，例如在图片离显示还有200px的时候，就加载图片并显示在在屏幕上，你只需要：

$("img").unveil(200);

回调函数

As a second parameter you can also specify a callback function that will fire after an image has been "unveiled".

Inside the callback function this refers to the image's DOM node, so with the help of CSS3 (or jQuery animations) and by attaching a simple load event you can easily add some fancy entrance animation to your images:

img {
opacity: 0;
transition: opacity .3s ease-in;
}

$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});

触发

当你需要的时候，你仍然可以触发图像加载，你所要做的就是选择你想“显示”的图像，并触发事件：

$("img").trigger("unveil");

查找

也可以在网页中查找那些没有显示加载的图片，这是非常有用的，例如，在一个标签布局情况。

$(window).trigger("lookup");

取消

你可以从window中删除所有的“unveil”的事件处理程序：

$(window).off("unveil");

相关链接

• Github地址：https://github.com/luis-almeida/unveil/
• 项目地址：http://luis-almeida.github.com/unveil/
• Lazyr.js 轻量级的图片延时加载插件
• Lazyload图片懒加载jQuery插件