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 TO HTML 转换
Jun 26 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
详解Python正则表达式re模块
2019/03/19 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
研发工程师岗位职责
2014/04/28 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
科学发展观演讲稿
2014/09/11 职场文书
医药销售自我评价200字
2014/09/11 职场文书
给老婆的保证书
2015/01/16 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python实现老照片修复之上色小技巧
2021/10/16 Python
Nginx的基本概念和原理
2022/03/21 Servers