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 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
AngularJS语法详解
Jan 23 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
js轮播图之旋转木马效果
Oct 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python Requests库基本用法示例
2018/08/20 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
商务英语广告词大全
2014/03/18 职场文书
军人离婚协议书样本
2014/10/21 职场文书
摩登时代观后感
2015/06/03 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript