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 text()要注意啦
Oct 30 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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
多文件上传的例子
2006/10/09 PHP
一些常用的php简单命令代码集锦
2007/09/24 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP 文件上传限制问题
2019/09/01 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python 自定义对象的打印方法
2019/01/12 Python
Python logging设置和logger解析
2019/08/28 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
前处理班长职位说明书
2014/03/01 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
Java 多线程协作作业之信号同步
2022/05/11 Java/Android