熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Java核心技術 >> 正文

如何實現lazyload的圖片延遲加載功能(1/2)

2022-06-13   來源: Java核心技術 

如何實現lazyload的圖片延遲加載功能
lazyload的難點在如何在適當的時候加載用戶需要的資源(這裡用戶需要的資源指該資源呈現在浏覽器可視區域)因此我們需要知道幾點信息來確定目標是否已呈現在客戶區其中包括
     可視區域相對於浏覽器頂端位置
     待加載資源相對於浏覽器頂端位置

   在得到以上兩點數據後通過如下函數便可得出某對象是否在浏覽器可視區域了
    //返回浏覽器的可視區域位置
   

function getclient(){
       var ltwh;
       l  =  documentdocumentelementscrollleft || documentbodyscrollleft;
       t  =  documentdocumentelementscrolltop || documentbodyscrolltop;
       w =   documentdocumentelementclientwidth;
       h =   documentdocumentelementclientheight;
       return {left:ltop:twidth:wheight:h} ;
    }

    //返回待

加載資源位置
   

function getsubclient(p){
       var l = t = wh;
       w = poffsetwidth ;
       h = poffsetheight;

       while(poffsetparent){
        l += poffsetleft ;
        t += poffsettop ;
        p = poffsetparent;
     }

     return {left:ltop:twidth:wheight:h } ;
  }

    其中 函數 getclient()返回浏覽器客戶區區域信息getsubclient()返回目標模塊區域信息此時確定目標模塊是否出現在客戶區實際上是確定如上兩個矩形是否相交

    //判斷兩個矩形是否相交返回一個布爾值
   

function intens(recrec){
       var lclctctcwh;
       lc = recleft + recwidth / ;
       lc = recleft + recwidth / ;
       tc = rectop + recheight / ;
       tc = rectop + recheight / ;
       w = (recwidth + recwidth) / ;
       h = (recheight + recheight) / ;
       return mathabs(lc lc) < w && mathabs(tc tc) < h ;
    }



From:http://tw.wingwit.com/Article/program/Java/hx/201405/30807.html

    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.