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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
Javascript中typeof 用法小结
May 12 Javascript
TypeScript入门-接口
Mar 30 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 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
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
小程序转发探索示例
2019/02/19 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python操作csv文件实例详解
2017/07/31 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
详解python中@的用法
2019/03/27 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python实现KNN分类算法
2019/10/16 Python
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
大学生毕业的自我评价分享
2014/01/02 职场文书
2014学年自我鉴定
2014/02/23 职场文书
普通党员个人整改措施
2014/10/27 职场文书
创先争优活动个人总结
2015/03/04 职场文书
销售开票员岗位职责
2015/04/15 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Python+Tkinter打造签名设计工具
2022/04/01 Python