如何?lazyload的圖片消極式載入功能(1/2)

如何?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 ;
 　　 }

首頁 1 2 末頁