本文實例為大家介紹如何透過javascript來延遲載入圖片，分享給大家供大家參考，具體內容如下
當一個網頁中含有大量圖片時，如果一開始就將圖片全部加載完畢，勢必會引起效能和效率上的問題，用戶可能會因為等待時間過久而離開。
這個時候，我們需要利用懶加載，也就是延遲加載圖片的方式，來提升網站的親和力。
一、延遲載入圖片
基本思路如下:
給需要延遲載入的圖片設定自訂屬性例如lazy-src，存在圖片來源所在路徑。然後將所有需要懶加載的圖片放入一個數組，在window.onscroll的時候判斷該數組內容是否出現在了用戶視線中，如果出現了，就將自定義屬性內容賦予圖片的src屬性。
下面我們來具體談談實現步驟。
首先，我們需要定義函數傳回瀏覽器的視覺區域位置：
/**
* @description: 返回浏览器的可视区域位置
* @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度
*/
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};
}
然後定義函數傳回待載入資源的位置：
/**
* @description: 返回待加载资源位置
* @params: p:需要加载的资源节点
* @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};
}
接下來定義函數，判斷兩個矩形區域是否相交：
/**
* @decription: 判断两个矩阵是否相交，返回一个布尔值
* @params: rec1,rec2:需要比较的节点矩阵
* @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;
}
最後對圖片資源進行監視，如果進入使用者視野則載入資源：
/**
* @description: 资源出现在视野中再加载.将资源放入一个数组。
*/
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];
}
}
}
}
當然，這裡只是講思路，如果用到工程上，還是有很多缺陷，例如效能和相容性等。所以推薦一款jquery外掛：lazyload
1、判斷css載入完成
這裡順便說一下如何判斷一個web頁面的css檔案載入完成。我們知道css透過外部文件引入，其實是一個link節點。所以我們只需要透過輪詢來判斷該link節點的sheet屬性或是sheet.cssRules屬性，就可以判斷該css檔案是否完全載入成功。
2、判斷圖片載入完成
同樣的，img標籤有一個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節點的onload方法就是載入完成後執行的。 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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助。
