javascript圖片延遲加載實(shí)現(xiàn)方法及思路_javascript技巧

1、javascript圖片延遲加載實(shí)現(xiàn)方法及思 路本文實(shí)例為人家介紹了如何通過javascript來延遲加載圖片，分享給人家供人 家參考，具體內(nèi)容如下當(dāng)一個(gè)網(wǎng)頁屮含冇大量圖片時(shí)，如果一開始就將圖片全部加載完畢，勢必會(huì)引起 性能和效率上的問題，用戶可能會(huì)由于等待時(shí)間過久而離開。這個(gè)吋候，我們需要利用懶加載，也就是延遲加載圖片的方式，來提高網(wǎng)站的親 和力。一、延遲加載圖片基本思路如下：給需要延遲加載的圖片設(shè)置自定義屬性比如lazy-src,存在圖片源所在路徑。 然后將所有需要懶加載的圖片放入一個(gè)數(shù)組，在window, onscroll的吋候判斷該 數(shù)組內(nèi)容是否出現(xiàn)在了用戶視線中，如果出現(xiàn)了，就將自定

2、義屬性內(nèi)容賦予圖片 的src屬性。下而我們來具體談?wù)剬?shí)現(xiàn)步驟。首先，我們需要定義函數(shù)返冋瀏覽器的可視區(qū)域位置：/* ©description:返回瀏覽器的可視區(qū)域位置* return: left:左滑輪距離，top：上滑輪距離，width：可見區(qū)域?qū)挾龋?height：可見區(qū)域長度*/function getclient()var 1, t, w, h;1 = document.documentelement. scrollleft|document. body. scrollleft; t 二 document. documentelement. scrolltopi |docum

3、ent. body. scrolltop; w = document, documenlelement, clienlwidth;h = document. documentelement. dientlleight;rctuim left:1, top:t, width:w, height:h;然后定義函數(shù)返冋待加載資源的位置：/* ©description:返回待加載資源位置* ©params: p:需要加載的資源節(jié)點(diǎn)* ©return: left:左邊距離，top：上邊距離,width：寬度,height：高度 */function getsubclient

4、(p)var 1=0, t 二 0, w, h;w = p.offsctwidth;h = p.offsetheight;while(p. offsetparent) 1 +二 p. offsetleft;t +二 p. offsettop;p = p.offsctparcnt;return left:1, top:t, width:w, height:h;接下來定義函數(shù)，判斷兩個(gè)矩形區(qū)域是否相交：/* decription:判斷兩個(gè)矩陣是否相交，返冋一個(gè)布爾值* ©params: recl,rec2:需要比較的節(jié)點(diǎn)矩陣* rcturn: true： 兩矩陣相交*/function

5、contains (reel, rec2)var lcl, lc2, tel, tc2, wl, hl;lei 二 reel, left + reel, width/2;lc2 = rcc2.left + rcc2. width/2;tel = reel.top + reelheight/2;tc2 = rec2.top + rec2.height/2;wl 二(reel, width + rec2. width)/2;hl 二(reel, height + rec2. height)/2; rcturn math, abs(lcl - lc2)<wl&&math. ab

6、s (tel - tc2) <hl;最后對圖片資源進(jìn)行監(jiān)視，如果進(jìn)入用戶視野則加載資源：/* ©description:資源出現(xiàn)在視野小再加載將資源放入一個(gè)數(shù)組。*/var arr 二 document. getelementsbyclassname(divx)；window. onscrol 1 二 function() var precl = getclient();var prcc2;for(var i = arr.1ength-1;i>=0;i-)if (arri)prec2 二 getsubclient(arri);if (contains(precl, pre

7、c2) 加載資源 consolc. log(eirri id); arr ichildnodes0src =arri. childnodes0. getattribute(，zlazy_src，z); delete arri;當(dāng)然，這里只是講思路，如果用到工程上，還是有很多缺陷，比如性能和兼容性 等。所以推薦一款jquery插件：lazyload1、判斷css加載完成這里順便說一下如何判斷一個(gè)web頁而的css文件加載完成。我們知道css通過 外部文件引入，其實(shí)是一個(gè)link節(jié)點(diǎn)。所以我們只需要通過輪詢來判斷該link 節(jié)點(diǎn)的sheet屬性或者sheet. cssrules屬性,就可以判斷該c

8、ss文件是否完全 加載成功。2、判斷圖片加載完成同樣的，img標(biāo)簽有一個(gè)complete屈性，我們只需要通過輪詢來查看該屈性即 可。function imgload(img, caliback) var timor = sctlntcrval (function。 if (img complete) callback(img) clearinterval(timer), 50)imgload (imgl, function() pl. innerhtml(,加載完畢') 3、判斷javascript加載完成 那么如何判斷javascript加載完成呢？ script節(jié)點(diǎn)的onload方

9、法就是加載完 成后執(zhí)行的。ie6和ie7則可通過readystate來判斷：function include_js(file) var _doc = document. getelementsbytagname(' head')0;var js = document. createelementscript，);js.setattribute c type', 'text/javascript");js. setattribute( src , file);_doc. appendchiid(js);if (!/*cc_on!*/0) /if not ie/firefox2> firefox3> safari3. l+> 0pera9. 6+ support js.onloadjs. onload = function () alert c firefox2> firefox3> safari3. l+> 0pera96+ supportjs. onloacf ); else /ie6> 1e7 support js. onreadstatechangejs.onreadystatechange 二 function () if (j