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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
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分页示例代码
2007/03/19 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP强制转化的形式整理
2020/05/22 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
js+canvas实现画板功能
2020/09/13 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
物流仓储计划书
2014/01/10 职场文书
信息管理专业自荐书
2014/06/05 职场文书
四风之害观后感
2015/06/09 职场文书
同意落户证明
2015/06/19 职场文书
宾馆安全管理制度
2015/08/06 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技
TypeScript 内置高级类型编程示例
2022/09/23 Javascript