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的回到页面顶部按钮
Jun 27 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
js querySelector() 使用方法
Dec 21 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
vue中的inject学习教程
Apr 24 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
关于JavaScript轮播图的实现
Nov 20 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
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
VUE重点问题总结
2018/03/19 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python爬虫 正则表达式解析
2019/09/28 Python
浅析python 字典嵌套
2020/09/29 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
小学生教师节演讲稿
2014/09/03 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
第一书记观后感
2015/06/08 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang
Golang数据类型和相互转换
2022/04/12 Golang
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android