尤其是对于高清晰的图片,占的几M的空间。 ImageLazyLoad技术就是,当前可是界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
眼下比较常用的图片延迟加载技术有四种:kissy(淘宝的JS框架),Jquery 图片延迟插件,Prototype,YUI2。
一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小):
1.导入JS插件
<script src="http://jianzi0307.blog.163.com/blog/jquery.js" type="text/javascript"></script>
<script src="http://jianzi0307.blog.163.com/blog/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="http://jianzi0307.blog.163.com/blog/path/to/img" alt="something" />
如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供:http://www.appelsiini.net/projects/lazyload
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以。
分享到:
相关推荐
HTML延迟加载图片 html图片延迟加载技术大全.zip
Fish整理图片延迟加载技术
大家应该听说过图片延迟加载技术吧。就是网站首页有较多图片的时候,一次性加载完要好久,有了这个东西,用户看到的地方才加载,提升打开速度,提高用户体验,本人整理出来实现一键傻瓜操作,让不懂的添加代码的人也...
本实例利用的是jquery的延迟加载插件实现图片延迟加载,实例简单,一目了然
使用jquery 进行图片延迟加载,区别于jquery插件的lazyload。按需加载。
这是一款有关网页图片延迟加载的小案例,主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看...
JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
:图片延迟加载技术能够加快页面下载速度,减轻服务器的负荷,提高用户体验。图片延迟加载技术在各种js框架都 得到一定程度的实现。本文详细介绍了通过使用jQuery框架实现图片延迟加载功能。
图片延迟加载,主流的技术··一般的b-c都会用到,有必要学习
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
首先要发n多个请求,性能肯定不怎么好,而我们用延迟加载技术,页面打开时候 只加载第一屏数据,第二屏以上都用延迟加载 滚动的时候进行加载,这样的话 假如页面不管他有n屏的话 那么我们只管加载第一屏的数据,后面...
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的...
JavaScript实现图片懒加载。图片懒加载是一种在页面加载时,延迟加载图片资源的技术,也就是说图片资源在需要的时候才会加载。
这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度下载地址:http://www.appelsiini.net/download/jquery.lazyload.js一、快速使用篇 1.导入JS插件 代码如下: [removed][removed]...
jquery.lazyload 实现图片延迟加载,ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面
dataLazyload延迟加载技术。常用网页图片延迟加载。
原理技术当你网站打开显示屏幕中就显示图片,没显示的内容只现在提示的图片。其实图片早就已经加载出来了。只是用一个JS效果把商城图片先暂时隐藏起来,达到首页加快的效果。本工具来自电视帮站长Casye....