javascript 懒加载技术代码实现

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

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

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

  在得到以上两点数据后,通过如下函数,便可得出某对象是否在浏览器可视区域了.
  //返回浏览器的可视区域位置
   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(p){
     var l = 0,t = 0,w,h;
     w = p.offsetWidth ;
     h = p.offsetHeight;

    while(p.offsetParent){
    l += p.offsetLeft ;
     t += p.offsetTop ;
     p = p.offsetParent;
  }

  return {'left':l,'top':t,'width':w,'height':h } ;
}

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

  //判断两个矩形是否相交,返回一个布尔值
   function intens(rec1,rec2){
     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(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;
   }

  现在基本上可以实现延时加载了,接下来,我们在 window.onscroll 事件中编写一些代码监控目标区域是否呈现在客户区.
  <div style = "width:100px; height:3000px"></div>
  <div id = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
  </div>
   var d1 = document.getElementById("d1");
   window.onscroll = function(){
     var prec1 = getClient();
    var prec2 = getSubClient(d1);
     if(intens(prec1,prec2)){
       alert("true")
       }
  }

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

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

   //比较某个子区域是否呈现在浏览器区域
  function jiance(arr,prec1,callback){
   var prec2;
   for(var i = arr.length - 1 ; i >= 0 ;i--){
     if(arr[i]){
     prec2 = getSubClient(arr[i]);
     if(intens(prec1,prec2)){
      callback(arr[i]);
       //加载资源后,删除监测
        delete arr[i];
      }
    }
   }
  }

  //检测目标对象是否出现在客户区
  function autocheck(){
     var prec1 = getClient();
    jiance(arr,prec1,function(obj){

      //加载资源...
     alert(obj.innerHTML)
    })
  }
  //子区域一
   var d1 = document.getElementById("d1");
   //子区域二
  var d2 = document.getElementById("d2");

   //需要按需加载区域集合
  var arr = [d1,d2];
   window.onscroll = function(){

     //重新计算
     autocheck();
  }

  window.onresize = function(){

     //重新计算
     autocheck();
  }

  现在我们只需要在弹窗的地方加载我们需要的资源了.源码就不贴出来了.如果需要的朋友,或着存在疑问的地方,可以联系我.

分类:默认分类 时间:2012-01-05 人气:4
本文关键词:
分享到:

相关文章

  • JavaScript实现页面实时显示当前时间的简单实例 2012-01-02

    这篇文章介绍了页面实时显示当前时间的简单实例,有需要的朋友可以参考需要 复制代码 代码如下: <html> <head> <title>JavaScript实现页面实时显示当前时间</title> </head> <body> <script language="javascript"> function showtime() { var today,hour,second,minute,year,month,d

  • Javascript倒计时跳转页面实例 2012-01-03

    在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,当然还可以使用页面的metea实现了,下面我介绍两个实例。 例1 倒计时刷新页面 代码如下 <script type="text/javascript" language="JavaScript"> var startTime = new Date(); var endTime=startTime.getTime()+10*60*1000; var g_blinkswitch = 0; var g_b

  • JavaScript修改css样式style动态改变元素样式 2012-01-04

    修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的 一、局部改变样式 分为改变直接样式,改变className和改变cssText三种。需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.

  • javascript中的编程语言如何编码规范 2012-01-07

      对于熟悉 C/C++ 或 Java 语言的工程师来说,javascript 显得灵活,简单易懂,对代码的格式的要求也相对松散。很容易学习,并运用到自己的代码中。也正因为这样,javascript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 javascript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注。   本文浅谈 javascript

  • vs2008的JavaScript 语法提示(Intellisense)功能 2012-01-09

    一直想这javascript能提供注释功能就好了,vs2008里提供了智能感知(Intellisense)功能,想用这个功能的童鞋可以在html里开发javascript,最后再保存在js文件中。下面我们就介绍下javascript的智能感知(Intellisense)功能 JavaScript已经发展成为进行Web客户端编程的标准语言。它有大量的语言资源,但是对开发的支持并不完备。大多数使用JavaScript的开发人员更倾向于用原来的方法进行调试,但是现在有很多工具来减轻测试和调试的负担。

  • 为IE浏览器的javascript提速 2012-01-10

    随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势。IE8浏览器的Javascript运行速度虽然相对于IE7以及IE6有着很大的提升,但相对于Webkit引擎的浏览器还是有一定的差距,在去年的ZDNET Javascript测试上Chrome浏览器表现突出,一举击败Firefox、Safari和微软的IE浏览器。不过因为IE浏览器相对庞大的使用人

  • 关于javascript中对浮点加,减,乘,除的精度分析 2012-01-11

    大学专业是计算机童鞋或多或小的知道 计算机是由二进制存储和处理数字的,不能精确到处理浮点数,且javascript也没有这样的方法 所以在浏览器计算的时候也会有误差,比如说 我想用 3.3 / 1.1 那么按道理来说 答案是 3 ,对不对 但是我们可以打印出来看下 结果令我们很惊讶 是 2.9999999999999996 .现在我们想 为了避免产生精度差异,需要计算的数字升级(乘以10的n次幂)成计算机能够精确识别的整数,等计算完毕再降级(除以10的n次幂). 这样处理下 就可以实现正常的结果

  • JavaScript Event学习第三章:早期的事件处理程序 2012-01-14

    被第二代浏览器所支持。 这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发 明的。因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览 器就得跟着Netscape走,所以这里没有兼容性的问题。所以这种模式在任何支持 JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件。 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: 1 <A HREF="somewhere

  • Javascript 遮罩层和加载效果代码 2012-01-14

    这篇文章介绍了Javascript 遮罩层和加载效果代码,有需要的朋友可以参考一下 复制代码 代码如下: //loading function showLoad(tipInfo) { var iWidth = 120; //弹出窗口的宽度; var iHeight = 0; //弹出窗口的高度; var scrolltop = 0; var scrollleft = 0; var cheight = 0; var cwidth = 0; var eTip = document.createEle

  • JavaScript脚本编写规范 2012-01-25

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散。很容易学习,并运用到自己的代码中。也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注。 本文浅谈 JavaScript 编程中关

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.040 (s). 10 q(s)