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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现电子词典
2020/04/23 Python
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
python用Configobj模块读取配置文件
2020/09/26 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
什么是.net
2015/08/03 面试题
自荐信模版
2013/10/24 职场文书
会计应聘求职信范文
2013/12/17 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
五心教育心得体会
2014/09/04 职场文书
高中校园广播稿
2014/10/21 职场文书
体育个人工作总结
2015/02/09 职场文书
北大自主招生自荐信
2015/03/04 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript