Jquery图片延迟加载插件jquery.lazyload.js的使用方法


Posted in Javascript onMay 21, 2014

最新版的jquery.lazyload.js已不再是伪的延迟加载了

一、请按照基本使用方法说明设置

//载入JavaScript 文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
//img标签的4个属性一个都不能少,否则不能实现延迟加载的效果,如下:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
//使用
$(function() {
    $("img.lazy").lazyload();
});

二、常用属性说明

threshold : 200   //设置灵敏度,表示进入显示区域还有200像素就开始加载
effect : "fadeIn" //使用淡入特效
failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档
container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性
event : "click" //修改触发事件为单击

三、参考

英文参考:http://www.appelsiini.net/projects/lazyload

中文参考:http://code.ciaoca.com/jquery/lazyload/

Javascript 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
Jquery的each里用return true或false代替break或continue
May 21 #Javascript
alert和confirm功能介绍
May 21 #Javascript
采用call方式实现js继承
May 20 #Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 #Javascript
js 采用delete实现继承示例代码
May 20 #Javascript
js清空form表单中的内容示例
May 20 #Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 #Javascript
You might like
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
python实现倒计时的示例
2014/02/14 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
介绍一下Mysql的存储引擎
2015/02/12 面试题
《故都的秋》教学反思
2014/04/15 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
教师工作决心书
2015/02/04 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
办公室日常管理制度
2015/08/04 职场文书
高一数学教学反思
2016/02/18 职场文书
初中思想品德教学反思
2016/02/24 职场文书
python 网络编程要点总结
2021/06/18 Python