注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

成长...

坚持,一定要坚持!

 
 
 

日志

 
 

使用ImageLazyLoad技术,对图片延迟加载  

2010-11-04 02:21:44|  分类: 做站心得 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
ImageLazyLoad技术,就是在下拉滚动条的时候加载图片,这种比较 适合一个网页上有很多图片的情况,例如我的网站:www.uucc5.com 满页都是图片,那么如果用户访问的时候,会在加载完整个页面等待很长时间,而用第一眼看到的只是第一屏的内容,所以第二屏、第三屏等的内容加载时间其实是 在浪费时间!如果用户只看了第一屏,而不翻屏就关掉了浏览器,那么第二屏第三屏下载的资源也是一中流量的浪费! 并且加载用户体验也不好!那么这就有了这个小技巧,使用javascript来实现图片缓冲,只加载用户要看的屏幕的资源,这个小技巧的好处是提高访问速 度,提高用户体验,对seo没有什么帮助!,不废话,说做法:

一、使用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://jianzi0307.blog.163.com/blog/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://jianzi0307.blog.163.com/blog/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(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以。

{完}

btw: 编辑器好讨厌,一些链接自动替换为“http://jianzi0307.blog.163.com/blog/”,这种做法太SB,烦!!!!

  评论这张
 
阅读(3311)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017