jquery的promise实践--连续加载图片

来源：互联网发布：编程的本质 pdf 微盘编辑：程序博客网时间：2024/06/03 17:21

在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>

在代理函数的最后，返回deferred的promise对象，用于给调用的地方监控加载的完成和失败态，以便于下一张图片的加载。

2.一张一张的连续加载。

0 0