jquery的promise實踐--連續加載圖片

javascript設計模式實踐之代理模式--圖片預加載中用代理模式實現了圖片預加載功能。javascript

如今就更進一步,完成一個可以一張一張的連續圖片加載的功能。html

功能:java

1.一張一張加載圖片。jquery

2.加載錯誤,超時後顯示加載失敗圖片。設計模式

對於功能的要求,確定會存在對加載狀態事件的處理以及完成時回調函數的處理,這樣不只會形成代碼上的混亂,甚至破壞各類原則,就再也不用普通的方法去寫了。針對這種狀態通知的特色,比較合適採用promise架構進行處理,promise本質上就是訂閱發佈設計模式的一種,當前這個功能就用jquery自帶的promise進行開發。數組

 

1.完成一個加載圖片的代理建立函數,能夠生成一個帶有加載超時、失敗、成功、取消監控能力的代理。promise

            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方法響應完成事件。架構

加載成功時的完成事件。app

                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>
相關文章
相關標籤/搜索