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 相关文章推荐
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python3的输入方式及多组输入方法
2018/10/17 Python
python scipy卷积运算的实现方法
2019/09/16 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
银行领导证婚词
2014/01/11 职场文书
自荐书4要点
2014/01/25 职场文书
商业街策划方案
2014/05/31 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
小学教师工作总结2015
2015/04/07 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android