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高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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 远程关机实现代码
2009/11/10 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
详解Python中find()方法的使用
2015/05/18 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python logging模块用法示例
2018/08/28 Python
浅析Python函数式编程
2018/10/06 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
详解python pandas 分组统计的方法
2019/07/30 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
工程师岗位职责
2013/11/08 职场文书
yy司仪主持词
2014/03/22 职场文书
中学生励志演讲稿
2014/04/26 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers