Jquery promise實作一張一張載入圖片_jquery
- WBOY原創
- 2016-05-16 15:32:311581瀏覽
Promise是CommonJS的規格之一，擁有resolve、reject、done、fail、then等方法，能夠幫助我們控製程式碼的流程，避免函數的多層巢狀。如今異步在web開發中越來越重要，對於開發人員來說，這種非線性執行的程式會讓開發者覺得難以掌控，而Promise可以讓我們更能掌控程式碼的執行流程,jQuery等流行的js函式庫都已經實作了這個對象，年底即將發布的ES6也將原生實作Promise。
在javascript設計模式實踐之代理模式--圖片預加載中用代理模式實現了圖片預加載功能。
現在就更進一步，完成一個能夠一張一張的連續圖片載入的功能。
功能：
1.一張一張載入圖。
2.載入錯誤，逾時後顯示載入失敗圖片。
對於功能的要求，肯定會存在對載入狀態事件的處理以及完成時回呼函數的處理，這樣不僅會造成程式碼上的混亂，甚至破壞各種原則，就不再用普通的方法去寫了。針對這種狀態通知的特點，比較適合採用promise架構處理，promise本質上就是訂閱發佈設計模式的一種，當前這個功能就用jquery自帶的promise進行開發。
1.完成一個載入圖片的代理建立函數，可以產生一個有載入逾時、失敗、成功、取消監控能力的代理程式。
function createLoadImgProxy(){
var imgCache = new Image();
var dfd = $.Deferred();
var timeoutTimer;
//开始加载超时监控，超时后进行reject操作
function beginTimeoutWatcher(){
timeoutTimer = setTimeout(function(){
dfd.reject('timeout');
}, 10000);
}
//结束加载超时监控
function endTimeoutWatcher(){
if(!timeoutTimer){
return;
}
clearTimeout(timeoutTimer);
}
//加载完成事件处理，加载完成后进行resolve操作
imgCache.onload = function(){
dfd.resolve(this.src);
};
//加载终止事件处理，终止后进行reject操作
imgCache.onabort = function(){
dfd.reject("aborted");
};
//加载异常事件处理，异常后进行reject操作
imgCache.onerror = function(){
dfd.reject("error");
};
return function(eleImg, src){
dfd.always(function(){
//加载完成或加载失败都要终止加载超时监控
endTimeoutWatcher();
}).done(function(src){
//加载完成后，往图片元素上设置图片
loadImg(eleImg, src);
}).fail(function(msg){
//加载失败后，往图片元素上设置失败图片
loadImg(eleImg, 'loadFailed.jpg');
});
loadImg(eleImg, 'loading.gif');
imgCache.src = src;
//开始进行超时加载监控
beginTimeoutWatcher();
return dfd.promise();
};
}
其中，透過以下的方式建立了一個Deferred物件
複製程式碼 程式碼如下:
var dfd = $.Deferred();
Deferred物件透過resolve方法觸發完成事件，使用done方法回應完成事件。
載入成功時的完成事件。
複製程式碼 程式碼如下:
imgCache.onload = function(){
dfd.resolve(this.src);
};
以及載入完成時的回應處理，就是把圖片設到元素上，下面的程式碼是上面鍊式寫法的拆解。
複製程式碼 程式碼如下:
dfd.done(function(src){
//設定完成後，並為圖片元素設定圖片
loadImg(eleImg, src);
});
Defferred物件透過reject方法觸發拒絕事件，使用fail方法回應拒絕事件，表示載入失敗。
在載入超時，終止，異常時的拒絕事件。
//开始加载超时监控，超时后进行reject操作
function beginTimeoutWatcher(){
timeoutTimer = setTimeout(function(){
dfd.reject('timeout');
}, 10000);
}
//加载终止事件处理，终止后进行reject操作
imgCache.onabort = function(){
dfd.reject("aborted");
};
//加载异常事件处理，异常后进行reject操作
imgCache.onerror = function(){
dfd.reject("error");
};
以及載入失敗時的回應處理，設定失敗圖片。
dfd.fail(function(msg){
//加载失败后，往图片元素上设置失败图片
loadImg(eleImg, 'loadFailed.jpg');
});
在代理函數的最後，返回deferred的promise對象，用於給調用的地方監控加載的完成和失敗態，以便於下一張圖片的加載。
return dfd.promise();
2.一張一張的連續加載
//一张一张的连续加载图片
//参数：
// srcs: 图片路径数组
function doLoadImgs(srcs){
var index = 0;
(function loadOneByOne(){
//退出条件
if(!(s = srcs[index++])) {
return;
}
var eleImg = createImgElement();
document.getElementById('imgContainer').appendChild(eleImg);
//创建一个加载代理函数
var loadImgProxy = createLoadImgProxy();
//在当前图片加载或失败后，递归调用，加载下一张
loadImgProxy(eleImg, s).always(loadOneByOne);
})();
}
做一個loadOneByOne的載入遞迴函數。
內部先建立一個載入代理，在代理載入完圖片，不管是成功或失敗後，遞迴呼叫loadOneByOne函數載入下一張圖片。
關鍵在於代理函數傳回的promise對象，使用.always方法可在載入完成後（成功或失敗）進行loadOneByOne遞迴呼叫載入下一張。
複製程式碼 程式碼如下:
loadImgProxy(eleImg, s).always(loadOneByOne);
至此完成。
采用了promise模式后，callback函数不见了，维护状态的函数和内部变量也不见了，代码更清晰简单，使得代理函数和本地函数之间的一致性得到保护。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button id='btnLoadImg'>加载图片</button>
<br>
<div id='imgContainer'>
</div>
<br>
<script type='text/javascript' src="./jquery-1.11.3.min.js"></script>
<script type='text/javascript'>
var imgSrcs = [
'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg',
'http://www.newbridgemotorsport.com/files/6413/9945/0406/IMG_3630.jpg',
'http://www.carsceneuk.com/wp-content/uploads/2015/03/88y9989.jpg',
'http://mfiles.sohu.com/20130223/5ff_403b2e7a_7a1f_7f24_66eb_79e3f27d58cf_1.jpg',
'http://img1.imgtn.bdimg.com/it/u=2678963350,1378052193&fm=21&gp=0.jpg'
];
$(document).ready(function(){
$('#btnLoadImg').bind('click', function(){
doLoadImgs(imgSrcs);
});
});
//创建img标签
//这里用自执行函数加一个闭包，是为了可以创建多个id不同的img标签。
var createImgElement = (function(){
var index = 0;
return function() {
var eleImg = document.createElement('img');
eleImg.setAttribute('width', '200');
eleImg.setAttribute('heght', '150');
eleImg.setAttribute('id', 'img' + index++);
return eleImg;
};
})();
function loadImg(img, src) {
img.src = src;
}
function createLoadImgProxy(){
var imgCache = new Image();
var dfd = $.Deferred();
var timeoutTimer;
//开始加载超时监控，超时后进行reject操作
function beginTimeoutWatcher(){
timeoutTimer = setTimeout(function(){
dfd.reject('timeout');
}, 10000);
}
//结束加载超时监控
function endTimeoutWatcher(){
if(!timeoutTimer){
return;
}
clearTimeout(timeoutTimer);
}
//加载完成事件处理，加载完成后进行resolve操作
imgCache.onload = function(){
dfd.resolve(this.src);
};
//加载终止事件处理，终止后进行reject操作
imgCache.onabort = function(){
dfd.reject("aborted");
};
//加载异常事件处理，异常后进行reject操作
imgCache.onerror = function(){
dfd.reject("error");
};
return function(eleImg, src){
dfd.always(function(){
// alert('always end');
//加载完成或加载失败都要终止加载超时监控
endTimeoutWatcher();
}).done(function(src){
// alert('done end');
//加载完成后，往图片元素上设置图片
loadImg(eleImg, src);
}).fail(function(msg){
// alert('fail end:' + msg);
//加载失败后，往图片元素上设置失败图片
loadImg(eleImg, 'loadFailed.jpg');
});
loadImg(eleImg, 'loading.gif');
imgCache.src = src;
//开始进行超时加载监控
beginTimeoutWatcher();
return dfd.promise();
};
}
//一张一张的连续加载图片
//参数：
// srcs: 图片路径数组
function doLoadImgs(srcs){
var index = 0;
(function loadOneByOne(){
//退出条件
if(!(s = srcs[index++])) {
return;
}
var eleImg = createImgElement();
document.getElementById('imgContainer').appendChild(eleImg);
//创建一个加载代理函数
var loadImgProxy = createLoadImgProxy();
//在当前图片加载或失败后，递归调用，加载下一张
loadImgProxy(eleImg, s).always(loadOneByOne);
})();
}
</script>
</body>
</html>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn