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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 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
windows中为php安装mongodb与memcache
2015/01/06 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
用 Python 制作地球仪的方法
2020/04/24 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python文件排序的方法总结
2020/09/13 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
作风建设演讲稿
2014/05/23 职场文书
工作证明英文模板
2014/10/21 职场文书
服务员态度差检讨书
2014/10/28 职场文书
英文邀请函
2015/02/02 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
Python中request的基本使用解决乱码问题
2022/04/12 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技
nginx配置指令之server_name的具体使用
2022/08/14 Servers