详解jQuery lazyload 懒加载


Posted in Javascript onDecember 19, 2016

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

           Demo页面:

           基本选项

           淡入效果

           对不支持JavaScript浏览器的降级处理

           水平滚动

           容器内水平滚动

           容器内垂直滚动

           页面内存在N多图片

           经过五秒钟的延迟后加载图片

           用AJAX来加载图片

如何使用

Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是</body>前:

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

你必须改变图片的标签。图像的地址必须放在data-original属性上。给懒加载图像一个特定的class(例如:lazy)。这样你可以很容易地进行图像插件捆绑。代码如下:

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
$(function() {
 $("img.lazy").lazyload();
});

这将使所有 class 为 lazy 的图片将被延迟加载.

Demo:基本选项

TIPS:这里必须设置图片的width和height,否则插件可能无法正常工作。

设置临界点

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

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

设置事件来触发加载

你可以使用jQuery事件,例如click和mouseover。也可以使用自定义事件,如sporty、foobar默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片:

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

Demo:经过五秒钟的延迟后加载图片

使用特效

默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)。

Demo:淡入效果

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

针对不启用JavaScript的情况

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内.

<img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

可以通过 CSS 隐藏占位符.

.lazy {
 display: none;
}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

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

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

Demo:容器内水平滚动, 容器内垂直滚动

当图像不连续时

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$("img.lazy").lazyload({
 failure_limit : 10
});

将 failurelimit 设为 10 ,令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

加载隐藏的图片

可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

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

下载插件

最新版本 源代码和压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
简单实现js倒计时功能
Feb 13 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
JavaScript闭包和范围实例详解
Dec 19 #Javascript
JS前端笔试题分析
Dec 19 #Javascript
You might like
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
python抽象基类用法实例分析
2015/06/04 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python利用微信公众号实现报警功能
2018/06/10 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python基于event实现线程间通信控制
2020/01/13 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
建筑工程实习自我鉴定
2013/09/19 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
五水共治一句话承诺
2014/05/30 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android