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

《javascript圖片延遲加載實(shí)現(xiàn)方法及思路_javascript技巧》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

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

2、scroll的吋候判斷該數(shù)組內(nèi)容是否出現(xiàn)在了用戶視線中，如果出現(xiàn)了，就將自定義屬性內(nèi)容賦予圖片的src屬性。下而我們來(lái)具體談?wù)剬?shí)現(xiàn)步驟。首先，我們需要定義函數(shù)返冋瀏覽器的可視區(qū)域位置：/***?description:返回瀏覽器的可視區(qū)域位置*@return:left:左滑輪距離，top：上滑輪距離，width：可見(jiàn)區(qū)域?qū)挾?，height：可見(jiàn)區(qū)域長(zhǎng)度*/functiongetClient(){var1,t,w,h;1=document.documentElement.scrollLeft

3、

4、docume

5、nt.body.scrollLeft;t二document.documentElement.scrollTopI

6、document.body.scrollTop;w=document,documenlElement,clienlWidth;h=document.documentElement.dientlleight;rctuim{left:1,top:t,width:w,height:h};}然后定義函數(shù)返冋待加載資源的位置：/***?description:返回待加載資源位置*?params:p:需要

7、加載的資源節(jié)點(diǎn)*?return:left:左邊距離，top：上邊距離,width：寬度,height：高度*/functiongetSubClient(p){var1=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};}接下來(lái)定義函數(shù)，判斷兩個(gè)矩形區(qū)域是否

8、相交：/***@decription:判斷兩個(gè)矩陣是否相交，返冋一個(gè)布爾值*?params:recl,rec2:需要比較的節(jié)點(diǎn)矩陣*@rcturn:true：兩矩陣相交*/functioncontains(reel,rec2){varlcl,lc2,tel,tc2,wl,hl;lei二reel,left+reel,width/2;lc2=rcc2.left+rcc2.width/2;tel=reel.top+reel?height/2;tc2=rec2.top+rec2.height/2;wl二(reel

9、,width+rec2.width)/2;hl二(reel,height+rec2.height)/2;rcturnMath,abs(lcl-lc2)

10、Client();varprcc2;for(vari=arr.1ength-1;i>=0;i--){if(arr[i]){prec2二getSubClient(arr[i]);if(contains(precl,prec2)){〃加載資源consolc.log(eirr[i]?id);arr[i]?childNodes[0]?src=arr[i].childNodes[0].getAttribute(，zlazy_src，z);deletearr[i];當(dāng)然，這里只是講思路，如果用到工程上，還是有很多缺陷

11、，比如性能和兼容性等。所以推薦一款jquery插件：lazyload1、判斷css加載完成這里順便說(shuō)一下如何判斷一個(gè)web頁(yè)而的css文件加載完成。我們知道css通過(guò)外部文件引入，其實(shí)是一個(gè)link節(jié)點(diǎn)。所以我們只需要通過(guò)輪詢來(lái)判斷該link節(jié)點(diǎn)的sheet屬性或者sheet.cssRules屬性,就可以判斷該css文件是否完全加載成功。2、判斷圖片加載完成同樣的，img標(biāo)簽有一個(gè)complete屈性，我們只需要通過(guò)輪詢來(lái)查看