Unveil.js 基于 jQuery 轻量级的图片懒加载插件 - 资源分享

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

发布于 2019-11-06 字数 4092 浏览 1807 评论 0

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

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

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");

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

nuj316

文章 0 评论 0

梦中楼上月下

文章 2 评论 0

kook

文章 0 评论 0

thousandcents

文章 0 评论 0

像你

文章 1 评论 0