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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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
php中函数的形参与实参的问题说明
2010/09/01 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
javascript 数组排序函数
2009/08/20 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
Python 深入理解yield
2008/09/06 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
酒吧员工的岗位职责
2013/11/26 职场文书
前处理组长岗位职责
2014/03/01 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
营业员岗位职责范本
2015/04/14 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2015年工商所工作总结
2015/05/21 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL