JavaScript的lazyload延迟加载是如何实现的

懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页，淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。雅加达娱乐城

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

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

  1. 可视区域相对于浏览器顶端位置
  2. 待加载资源相对于浏览器顶端位置

在得到以上两点数据后，通过如下函数，便可得出某对象是否在浏览器可视区域了。

01 //返回浏览器的可视区域位置
02 function getClient(){
03 　　 var l,t,w,h;
04 　　 l  =  document.documentElement.scrollLeft || document.body.scrollLeft;
05 　　 t  =  document.documentElement.scrollTop || document.body.scrollTop;
06 　　 w =   document.documentElement.clientWidth;
07 　　 h =   document.documentElement.clientHeight;
08 　　 return {‘left‘:l,‘top‘:t,‘width‘:w,‘height‘:h} ;
09 }
10 //返回待加载资源位置
11 function getSubClient(p){
12 　  var l = 0,t = 0,w,h;
13 　　 w = p.offsetWidth ;
14 　　 h = p.offsetHeight;
15 　　　while(p.offsetParent){
16 　　　　l += p.offsetLeft ;
17 　　  t += p.offsetTop ;
18 　　　 p = p.offsetParent;
19 　}
20 　return {‘left‘:l,‘top‘:t,‘width‘:w,‘height‘:h } ;

其中函数 getClient()返回浏览器客户区区域信息，getSubClient()返回目标模块区域信息。此时确定目标模块是否出现在客户区实际上是确定如上两个矩形是否相交。

01 //判断两个矩形是否相交,返回一个布尔值
02 function intens(rec1,rec2){
03 　　 var lc1,lc2,tc1,tc2,w1,h1;
04 　　 lc1 = rec1.left + rec1.width / 2;
05 　  lc2 = rec2.left + rec2.width / 2;
06 　　　tc1 = rec1.top + rec1.height / 2 ;
07 　　 tc2 = rec2.top + rec2.height / 2 ;
08 　　 w1 = (rec1.width + rec2.width) / 2 ;
09    h1 = (rec1.height + rec2.height) / 2;
10 　　 return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;
11 }

现在基本上可以实现延时加载了，接下来，我们在 window.onscroll 事件中编写一些代码监控目标区域是否呈现在客户区。

01 <div style = "width:100px; height:3000px"></div>
02 <div id  = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
03 </div>
04  var d1 = document.getElementById("d1");
05  window.onscroll = function(){
06 　 　　var prec1 = getClient();
07 　　　　var prec2 =  getSubClient(d1);
08 　　　　　if(intens(prec1,prec2)){
09 　　 　　　　alert("true")
10  　 　　}
11 　}

我们只需要在弹出窗口的地方加载我们需要的资源。

这里值得注意的是:目标对象呈现在客户区域时，会随着滚动而不断的弹出窗口。因此我们需要在弹出第一个窗口后取消对该区域的监测，这里用一个数组来收集需要监测的对象。还需要注意:因为onscroll事件和onresize事件都会改变游览器可视区域信息，因此在该类事件触发后需要重新计算目标对象是否在可视区域，这里用autocheck()函数实现。(迅雷首页的lazyload没有在onresize事件中重新计算目标对象是否在浏览器可视区域，因此如果先将浏览器窗口缩小到一定尺寸后滚动到需要加载图片的区域后点击最大化，图片加载不出来，呵呵，以后需要注意了)。

增加元素:<div id = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">

view source

print?

01 //比较某个子区域是否呈现在浏览器区域
02 　function jiance(arr,prec1,callback){
03 　　　var prec2;
04 　　　for(var i = arr.length - 1 ; i >= 0 ;i--){
05 　　　　 if(arr[i]){
06  　　　　 prec2 =  getSubClient(arr[i]);
07  　　　　 if(intens(prec1,prec2)){
08    　　　　　　callback(arr[i]);
09   　　　　　　 //加载资源后，删除监测
10  　　　　 　　 delete arr[i];
11   　　　　　　}
12  　　　　}
13 　　　}
14 　}
15  
16 　//检测目标对象是否出现在客户区
17 　function autocheck(){
18 　　　 var prec1 = getClient();
19 　　　　jiance(arr,prec1,function(obj){
20 　　　//加载资源...
21 　　　　 alert(obj.innerHTML)
22 　　　　})
23 　}
24 　//子区域一  
25  var d1 = document.getElementById("d1");
26  //子区域二
27 　var d2 = document.getElementById("d2");
28 //需要按需加载区域集合
29 　var arr = [d1,d2];
30  window.onscroll = function(){
31 　 //重新计算
32 　　　 autocheck();
33 　}
34 　window.onresize = function(){
35 　 //重新计算
36 　　　 autocheck();
37 　}

现在我们只需要在弹窗的地方加载我们需要的资源了，源码就不贴出来了。

时间： 2024-10-08 08:33:02

JavaScript的lazyload延迟加载是如何实现的的相关文章

Lazyload延迟加载效果和图片延迟加载

http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html   网页延迟加载   http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html  图片延迟加载

jquery lazyload延迟加载技术的实现原理分析

懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器. lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源,iframe,网

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

看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用J

jQuery与lazyload.js图片延迟加载

一.简介: 在html中请求图片是最大的一处难题,图片的大小给我们的服务器带来了很大的压力,造成了请求时间过长.图片难以加载出来.jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度. 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载.对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 官网:https://appelsiini.net/projects/lazyload/ 帮助:http://code.ciao

jquery-懒加载技术(简称lazyload)

第一:lazyLoad简介及作用: 网站性能优化的插件,提高用户体验. 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载. 第二:使用场合 涉及到图片,falsh资源,iframe,网页编辑器(CK),JS文件 等占用较大带宽,避免网页打开时加载过多资源,让用户等待太久. 第三:代码使用 1.导入JS插件(前提有 1.6.2.js文件) <script src="js\jquery.lazyload.

用Masonry和jQuery.lazyload插件实现网页瀑布流布局

瀑布流布局 我们常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如百度图片.这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到了最大的页面空间利用率. 因为对前端开发不了解,一开始为了找到这种布局叫什么名字也是花了我好久时间o(╯□╰)o 瀑布流布局不局限于等宽布局,例如下面这种形式也可以,来自Masonry官网截图. Masonry官网 http://masonry.desandro.com/ 瀑布流布局作为一种响应式布局,网

jquery图片延迟加载

在用户滚动页面到图片之后才进行加载,使用图片延迟加载,能有效的提高页面加载速度. 所需js插件: <script type="text/javascript" src="${path}/js/jquery.lazyload.js"></script><script type="text/javascript" src="${path}/js/jquery.lazyload.min.js">&

Jquery 图片延迟加载技术

参考网址:http://code.ciaoca.com/jquery/lazyload/ 延迟加载能大大增加你网站的加载速度! 需要引入以下文件<Jq文件也是少不了的>: <script src="~/Content/demo/jquery.lazyload.js"></script> <script src="~/Content/demo/jquery.lazyload.min.js"></script>

使用jquery插件实现图片延迟加载技术（懒加载）

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度 下载地址:http://www.appelsiini.net/download/jquery.lazyload.js 修正版:jquery.lazyloa