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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
Vue-component全局注册实例
Sep 06 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
React路由鉴权的实现方法
Sep 05 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基于websocket搭建简易聊天室实践
2016/10/24 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
vue如何引入sass全局变量
2018/06/28 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
通过实例学习Python Excel操作
2020/01/06 Python
python 实现波浪滤镜特效
2020/12/02 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
一个SQL面试题
2014/08/21 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
品管员岗位职责
2013/11/10 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
公证委托书格式
2014/09/13 职场文书
小学家长通知书评语
2014/12/31 职场文书
公务员政审个人总结
2015/02/12 职场文书
个人业务学习心得体会
2016/01/25 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
2019消防宣传标语!
2019/07/10 职场文书