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 相关文章推荐
JavaScript 函数式编程的原理
Oct 16 Javascript
javascript 跳转代码集合
Dec 03 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
Angular 多模块项目构建过程
Feb 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
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript 数组中最大最小值
2016/06/05 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python Shapely使用指南详解
2020/02/18 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python 高阶函数简单介绍
2021/02/19 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
道路建设实施方案
2014/03/18 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
人事任命通知书
2015/04/21 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python