文档章节

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

高处胜寒
 高处胜寒
发布于 2016/06/17 10:19
字数 494
阅读 44
收藏 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
博文 191
码字总数 144365
作品 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
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
关于图片延迟加载的解决方案(针对移动端)

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

crazymus
2014/12/30
0
2

没有更多内容

加载失败,请刷新页面

加载更多

JAVA设计模式之模板方法模式和建造者模式

一、前期回顾 上一篇《Java 设计模式之工厂方法模式与抽象工厂模式》介绍了三种工厂模式,分别是工厂方法模式,简单工厂方法模式,抽象工厂模式,文中详细根据实际场景介绍了三种模式的定义,...

木木匠
54分钟前
4
0
C中的宏的使用(宏嵌套/宏展开/可变参数宏)

基本原则: 在展开当前宏函数时,如果形参有#或##则不进行宏参数的展开,否则先展开宏参数,再展开当前宏。 #是在定义两边加上双引号 #define _TOSTR(s) #sprintf(_TOSTR(test ABC))pr...

SamXIAO
今天
4
0
SpringBoot 整合异步调用方法

1. 在 SpringBoot 主类上使用 @EnableAsync 注解,开启异步调用功能 package com.codingos.springbootdemo;import org.springframework.boot.SpringApplication;import org.springfra......

北漂的我
今天
1
0
0015-如何使用Sentry管理Hive外部表权限

1.文档编写目的 本文档主要讲述如何使用Sentry对Hive外部表权限管理,并基于以下假设: 1.操作系统版本:RedHat6.5 2.CM版本:CM 5.11.1 3.集群已启用Kerberos和Sentry 4.采用具有sudo权限的...

Hadoop实操
今天
5
0
边缘计算与数据中心的发展趋势

导读 Gartner研究表明,人工智能、物联网和5G助力下一代商业创新,由此产生大量数据,2020年前企业将使用超过75亿台联网设备。 在几乎每个方面,社会的节奏都正变得更快。我们希望客户服务问...

问题终结者
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部