看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..
什么是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" />
三、如果您是Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;
可查看http://www.appelsiini.net/projects/lazyload
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致;
相关推荐
jq图片延迟加载
jquery.lazyload用JQ实现图片延迟加载,即在浏览器看到的地方才加载图片。
HTML延迟加载图片 html图片延迟加载技术大全.zip
这是一款有关网页图片延迟加载的小案例,主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看...
图片懒加载(延迟加载)
LazyLoad 图片延迟加载效果示例 LazyLoad 图片延迟加载效果示例,这是由cloudgamer编写的一个封装插件,用它可以完成不少的效果,现在这个是图片延迟效果,也就是说,我们需要显示的图片会先加载,暂时用不上的也就...
网页加载时图片延迟加载,显示当前屏时加载
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效...
页面图片延迟加载,用起来非常方便,里面有demo,自己看一下,非常简单
jquery图片预加载延迟加载 先打开默认图片,随后顺序加载 优化打开速度 提升用户体验 极力推荐
jquery 图片延迟加载插件制作tab选项卡图片异步加载
纯jq写的图片延迟加载
js页面图片延迟加载特效是一款仿淘宝商城商品页面图片延迟加载效果,滚动条滚动到图片时再执行加载,添加了一个渐现效果 js页面图片延迟加载特效图:
一款基于jquery技术的web图片延迟加载技术,有利于加快页面的展现,提高用户的体验。
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
图片延迟加载,可以增加用户体验,jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。
Fish整理图片延迟加载技术
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
晓甜雨之前给大家也推荐过一款图片延迟加载特效,原文链接如下:jquery实现图片延迟加载和ajax方式加载页面 今天再给大家介绍一款,两者的区别在于前者有个加载的过程,后者则是渐变显示,两者的区别再此,晓甜雨...
自己写的图片延迟加载.在IE6、7、8和火狐下测试过。单机tomcat6环境下压力测试通过。 使用说明: 1 引入js文件。 2 在需要做图片延迟加载的页面把img 的src属性换成 hsrc 3 在页面加载前执行 hiddenImge(myImages, ...