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的一些小应用收集
Mar 27 Javascript
js 浏览器事件介绍
Mar 30 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
浅析vue-router原理
Oct 19 Javascript
微信小程序实现签字功能
Dec 23 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电台频率大全 - 18 湖南省
2020/03/11 无线电
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue webpack重写cookie路径的方法
2019/07/10 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python的多维空数组赋值方法
2018/04/13 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
django用户登录验证的完整示例代码
2019/07/21 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
晨会主持词
2014/03/17 职场文书
护士医德医风自我评价
2014/09/15 职场文书
滴水洞导游词
2015/02/10 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL