文档章节

jQuery Unveil – 另一款非常轻量的延迟加载插件

高处胜寒
 高处胜寒
发布于 2016/06/17 10:19
字数 494
阅读 34
收藏 0

jQuery Unveil 是一款轻量的延迟加载jquery插件,支持提供用于视网膜显示设备的高分辨率图像。这个插件非常有用,它能提高长网页中图像的加载性能,因为视口以外的图像(可见部分网页)将不会被加载,直到用户滚动到它们所在的区域才会被加载显示,大大的提高了网页的打开速度与体验性。

 Query Unveil延迟加载有一些很酷的选项,如自定义效果,容器,事件或数据属性。如果你不想使用这些功能,你可以减小文件的大小,只留下必要的代码来显示图像。

使用方法:

引入核心文件


 <script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="jquery.unveil.js"></script>

构建html代码,src属性的图片为加载时显示的图片,data-src为真正需要显示的图片,data-src-retina是视网膜上显示的图片

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

设定加载的时间,单位为毫秒,下面代码为加载时长300毫秒

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

更多参数请参考实例或是官方文档。

官网地址:http://luis-almeida.github.io/unveil/

常用的图片延迟加载插件:

http://www.appelsiini.net/projects/lazyload

http://callmecavs.com/layzr.js/

https://github.com/toddmotto/echo

© 著作权归作者所有

共有 人打赏支持
高处胜寒
粉丝 7
博文 185
码字总数 109702
作品 0
西安
程序员
20款Web开发者必备的jQuery插件,超赞!

JS框架jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件。jQuery插件不仅能够增强网站的可用性,有效地改善用户体验,还可以大大减少开发时间。现在的jQuery插件很多,可以根据您...

晨曦之光
2012/03/09
0
0
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
0
0
关于图片延迟加载的解决方案(针对移动端)

在页面上图片比较多的时候,为了优化性能,可以采用延迟加载技术,我封装了一款轻量级的插件。 插件下载地址: http://pan.baidu.com/s/1o6804Gy 使用方法: 1 在页面中需要引入echo.css和e...

crazymus
2014/12/30
0
2
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部