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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
Javascript 日期对象Date扩展方法
May 30 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
JS原型与继承操作示例
May 09 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
修复 Django migration 时遇到的问题解决
2018/06/14 Python
django session完成状态保持的方法
2018/11/27 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
英语专业毕业生自荐信
2013/10/28 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
门前三包责任书
2014/04/15 职场文书
品酒会策划方案
2014/05/26 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL