jquery.lazyload 实现图片延迟加载jquery插件_jquery_脚本之家

前言

什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面中的图片是不加载的,这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload
在线压缩js
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:
1.导入JS插件

原文发布时间为:2011-01-17 —— 来源于本人的百度文章 [由搬家工具导入]

如果留意淘宝的话,应该可以注意到:当打开产品页面后,并不是把页面中图片都下载下来,而是随着滚动条的滚动而加载图片.这样可以使页面载入速度更快,节省网站流量,减少服务器的负载.你可以灵活的把这一技术运用在存在大量图片的页面,比如频道页、活动页、搜索结果页等……(
我的博客列表页图片的展示也采用相同的技术)

懒加载技术并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy
load官网(

2.在你的页面中加入如下的javascript: $; 这将会使所有的图片都延迟加载。
当然插件还有几个配置项可供设置。 1.改变threshold $.lazyload;
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。
2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件 复制代码 代码如下: $.lazyload({ placeholder :
“img/grey.gif”, event : “click” }); 3.可以通过定义effect
参数来定义一些图片显示效果 复制代码
代码如下: $.lazyload({ placeholder : “img/grey.gif”, effect : “fadeIn”
}); LazyLoad技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google
Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad
大家可以直接采用淘宝的延迟加载技术:

调用方法也是很简单的:

 文章:

也许你还是一头雾水,别着急接着往下看:

lazyload在什么场合中应用比较合适?

注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui
2.x,你也可以直接引用下面的地址:

什么是ImageLazyLoad技术

涉及到图片,falsh资源,iframe,网页编辑器等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源。避免网页打开时加载过多资源,让用户等待太久。

配置参数如下: 复制代码 代码如下:

下载地址:

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

如何实现lazyload?

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

暂时先放个链接,哈

怎么实现ImageLazyLoad

lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括:

图片 1

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

可视区域相对于浏览器顶端位置; 待加载资源相对于浏览器顶端位置。

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

在线压缩js

在得到以上两点数据后,通过如下函数,便可得出某对象是否在浏览器可视区域了。返回浏览器的可视区域位置
复制代码 代码如下: //
返回浏览器的可视区域位置 function getClient(){ var l, t, w, h; l =
document.documentElement.scrollLeft || document.body.scrollLeft; t =
document.documentElement.scrollTop || document.body.scrollTop; w =
document.documentElement.clientWidth; h =
document.documentElement.clientHeight; return { left: l, top: t, width:
w, height: h }; } 返回待加载资源位置 复制代码 代码如下: // 返回待加载资源位置
function getSubClient{ var l = 0, t = 0, w, h; w = p.offsetWidth; h =
p.offsetHeight; while{ l += p.offsetLeft; t += p.offsetTop; p =
p.offsetParent; } return { left: l, top: t, width: w, height: h }; }
其中
函数getClient()返回浏览器客户区区域信息,getSubClient()返回目标模块区域信息。此时确定目标模块是否出现在客户区实际上是确定如上两个矩形是否相交。
复制代码 代码如下: //
判断两个矩形是否相交,返回一个布尔值 function intens{ var lc1, lc2, tc1,
tc2, w1, h1; lc1 = rec1.left + rec1.width / 2; lc2 = rec2.left +
rec2.width / 2; tc1 = rec1.top + rec1.height / 2 ; tc2 = rec2.top +
rec2.height / 2 ; w1 = (rec1.width + rec2.width) / 2 ; h1 = (rec1.height

可查看

在页脚添加以下代码即可:

  • rec2.height) / 2; return Math.abs < w1 && Math.abs < h1 ; }
    现在基本上可以实现延时加载了,接下来,我们在window.onscroll事件中编写一些代码监控目标区域是否呈现在客户区。
    复制代码 代码如下:

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

大家可以直接采用淘宝的延迟加载技术:

复制代码 代码如下: var div1 =
document.getElementById; window.onscroll = function(){ var prec1 =
getClient(); var prec2 = getSubClient; if { alert; } };
我们只需要在弹出窗口的地方加载我们需要的资源。 这里值得注意的是 :
目标对象呈现在客户区域时,会随着滚动而不断的弹出窗口。因此我们需要在弹出第一个窗口后取消对该区域的监测,这里用一个数组来收集需要监测的对象,同时将监测的逻辑抽出来。同时需要注意
onscroll事件和onresize事件都会改变游览器可视区域信息,因此在该类事件触发后需要重新计算,这里用autocheck()函数实现。
增加元素 : 复制代码 代码如下:

调用方法也是很简单的:
<script
src=”
type=”text/javascript”></script> <script
type=”text/javascript”>// <![CDATA[KISSY.ImageLazyload();//
]]></script>

复制代码 代码如下: //
比较某个子区域是否呈现在浏览器区域 function jiance{ var prec2; for (var
i = arr.length – 1; i >= 0; i–) { if { prec2 = getSubClient; if {
callback; // 加载资源后,删除监测 delete arr[i]; } } } } 复制代码 代码如下: //
检测目标对象是否出现在客户区 function autocheck(){ var prec1 =
getClient(); jiance(arr, prec1, function{ // 加载资源… alert } //
子区域一 var d1 = document.getElementById; // 子区域二 var d2 =
document.getElementById; // 需要按需加载区域集合 var arr = [d1, d2];
window.onscroll = function(){ // 重新计算 autocheck(); } window.onresize
= function(){ // 重新计算 autocheck(); }

注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui
2.x,你也可以直接引用下面的地址:
<script
src=””
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提供;

可查看

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

相关文章