本文實例為大家介紹了如何通過javascript來延遲加載圖片，分享給大家供大家參考，具體內(nèi)容如下
當(dāng)一個網(wǎng)頁中含有大量圖片時，如果一開始就將圖片全部加載完畢，勢必會引起性能和效率上的問題，用戶可能會由于等待時間過久而離開。
這個時候，我們需要利用懶加載，也就是延遲加載圖片的方式，來提高網(wǎng)站的親和力。
一、延遲加載圖片
基本思路如下:
給需要延遲加載的圖片設(shè)置自定義屬性比如lazy-src，存在圖片源所在路徑。然后將所有需要懶加載的圖片放入一個數(shù)組，在window.onscroll的時候判斷該數(shù)組內(nèi)容是否出現(xiàn)在了用戶視線中，如果出現(xiàn)了，就將自定義屬性內(nèi)容賦予圖片的src屬性。
下面我們來具體談?wù)剬崿F(xiàn)步驟。
首先，我們需要定義函數(shù)返回瀏覽器的可視區(qū)域位置：
/** * @description: 返回瀏覽器的可視區(qū)域位置 * @return: left:左滑輪距離，top：上滑輪距離，width：可見區(qū)域?qū)挾?，height：可見區(qū)域長度 */ 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}; } 然后定義函數(shù)返回待加載資源的位置：
/** * @description: 返回待加載資源位置 * @params: p:需要加載的資源節(jié)點 * @return: left:左邊距離，top：上邊距離，width：寬度，height：高度 */ 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}; } 接下來定義函數(shù)，判斷兩個矩形區(qū)域是否相交：
/** * @decription: 判斷兩個矩陣是否相交，返回一個布爾值 * @params: rec1,rec2:需要比較的節(jié)點矩陣 * @return: true： 兩矩陣相交 */ function contains(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; } 最后對圖片資源進(jìn)行監(jiān)視，如果進(jìn)入用戶視野則加載資源：
/** * @description: 資源出現(xiàn)在視野中再加載.將資源放入一個數(shù)組。 */ var arr = document.getElementsByClassName("divX"); window.onscroll = function(){ var prec1 = getClient(); var prec2; for(var i = arr.length-1;i>=0;i--){ if(arr[i]){ prec2 = getSubClient(arr[i]); if(contains(prec1,prec2)){ //加載資源 console.log(arr[i].id); arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src"); delete arr[i]; } } } } 當(dāng)然，這里只是講思路，如果用到工程上，還是有很多缺陷，比如性能和兼容性等。所以推薦一款jquery插件：lazyload
1、判斷css加載完成
這里順便說一下如何判斷一個web頁面的css文件加載完成。我們知道css通過外部文件引入，其實是一個link節(jié)點。所以我們只需要通過輪詢來判斷該link節(jié)點的sheet屬性或者sheet.cssRules屬性，就可以判斷該css文件是否完全加載成功。
2、判斷圖片加載完成
同樣的，img標(biāo)簽有一個complete屬性，我們只需要通過輪詢來查看該屬性即可。
function imgLoad(img, callback) { var timer = setInterval(function() { if (img.complete) { callback(img) clearInterval(timer) } }, 50) } imgLoad(img1, function() { p1.innerHTML('加載完畢') }) 3、判斷javascript加載完成
那么如何判斷javascript加載完成呢？script節(jié)點的onload方法就是加載完成后執(zhí)行的。ie6和ie7則可通過readyState來判斷：
function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', file); _doc.appendChild(js); if (!/*@cc_on!@*/0) { //if not IE //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload js.onload = function () { alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload'); } } else { //IE6、IE7 support js.onreadystatechange js.onreadystatechange = function () { if (js.readyState == 'loaded' || js.readyState == 'complete') { alert('IE6、IE7 support js.onreadystatechange'); } } } return false;} 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
