基于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 插件 将this下的div轮番显示
Apr 09 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
js实现带积分弹球小游戏
Jul 21 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/08/09 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript动态加载三
2012/08/22 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
jQuery使用方法
2017/02/04 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
python_mask_array的用法
2020/02/18 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
敬老院标语
2014/06/27 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
小学运动会开幕词
2015/01/28 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书