jquery 插件实现图片延迟加载效果代码


Posted in Javascript onFebruary 06, 2010

减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。
比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。
如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。
如何使用,引用如下js:
查看源代码打印帮助

<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script>

在你的页面中加入如下的javascript:
查看源代码打印帮助1 $("img").lazyload();
这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。
当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助
$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
});

我们还可以通过定义effect 参数来定义一些图片显示效果
查看源代码打印帮助
$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
});

下载地址: source, minified or packed
Javascript 相关文章推荐
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
详解vue的diff算法原理
May 20 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 #Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 #Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 #Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 #Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 #Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
You might like
php循环输出数据库内容的代码
2008/05/24 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
jquery 选取方法都有哪些
2014/05/18 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python的一些用法分享
2012/10/07 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
django 环境变量配置过程详解
2019/08/06 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
秘书英文求职信范文
2014/01/31 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
新学期决心书
2014/03/11 职场文书
商场租赁意向书
2014/07/30 职场文书
学校运动会广播稿
2014/10/11 职场文书
Python OpenGL基本配置方式
2022/05/20 Python
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技