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 测试及效验工具
Apr 18 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
使用node.js搭建服务器
May 20 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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删除数组中重复元素的方法
2015/12/22 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
经典大学生求职信范文
2014/01/06 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
医德医风自我评价
2014/09/19 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
英文邀请函
2015/02/02 职场文书
未婚证明格式
2015/06/15 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书