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 相关文章推荐
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
第十三节--对象串行化
2006/11/16 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JS编程小常识很有用
2012/11/26 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python实现excel读写数据
2021/03/02 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python url 参数修改方法
2018/12/26 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
元宵节晚会主持词
2015/07/01 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis