jquery.lazyload  实现图片延迟加载jquery插件


Posted in Javascript onFebruary 06, 2010

什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

怎么实现ImageLazyLoad

一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)

在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:

1.导入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript:

$("img").lazyload();

这将会使所有的图片都延迟加载。

当然插件还有几个配置项可供设置。

1.改变threshold

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。

2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
});

3.可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
});

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;
缺陷:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad

大家可以直接采用淘宝的延迟加载技术:(2kb大小)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
调用方法也是很简单的:
<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js"
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script>
注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址:
<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

配置参数如下:

<script type="text/javascript"> 
KISSY.ImageLazyload({ 
mod: "manual", // 延迟模式。默认为 auto 
diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载 
}); 
</script>

manual 模式时,需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面,宝贝列表的后20个图片延迟加载。 输出时,html 代码为:

<img data-lazy-src="path/to/img" alt="something" />

如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;

可查看http://www.appelsiini.net/projects/lazyload

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
利用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
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
You might like
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP基础知识介绍
2013/09/17 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
JavaScript中的 new 命令
2019/05/22 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
轻松实现python搭建微信公众平台
2016/02/16 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
为什么使用接口?
2014/08/13 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
校长就职演讲稿
2014/01/06 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
教师个人自我鉴定
2014/02/08 职场文书
《大海那边》教学反思
2014/04/09 职场文书
我爱我校演讲稿
2014/05/21 职场文书
绿色环保标语
2014/06/12 职场文书
岁月神偷观后感
2015/06/11 职场文书
教师岗位说明书
2015/09/30 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书