基于jquery的lazy loader插件实现图片的延迟加载[简单使用]


Posted in Javascript onMay 07, 2011

通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

使用lazy loader插件很简单,只要在页面中引入lazy loader插件,然后为页面上的图片调用延迟加载方法就可以了。lazy loader插件的下载地址:http://www.appelsiini.net/projects/lazyload。下面先看看具体的使用方法:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script> 
<script type="text/javascript"> 
$(document).ready( 
function(){ 
$("img").lazyload({ 
placeholder : "images/grey.gif", 
effect : "fadeIn" 
}); 
}); 
</script>

Jquery.LazyLoad.js插件参数详解:

1,用图片提前占位
placeholder : "img/grey.gif",
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

2,载入使用何种效果
effect : "fadeIn",
参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3,提前开始加载
threshold : 200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4,事件触发时才加载
event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

5,对某容器中的图片实现效果
container: $("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6,图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

Javascript 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
基于jQuery的倒计时插件代码
May 07 #Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 #Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 #Javascript
jQuery1.6 正式版发布并提供下载
May 05 #Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 #Javascript
jQuery bind事件使用详解
May 05 #Javascript
javascript 拖动表格行实现代码
May 05 #Javascript
You might like
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP生成条形图的方法
2014/12/10 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
OpenCV实现人脸识别
2017/04/07 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python读取几个G的csv文件方法
2019/01/07 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
支部书记四风对照材料
2014/08/28 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis