图片预加载

 首先是自己写的
       function preloadImages(imgArray ){
            var dfd = $.Deferred(),
                len = imgArray.length,
                loadImages  = 0;
                function loaded(){
                    if(loadImages==len){
                        dfd.resolve();
                    }
                };
                for(var i=0;i<len;i++){
                    var img  = new Image();
                    img.src = imgArray[i];
                    if(img.complete){
                        loadImages++
                        loaded();
                    }else{
                        img.onload=function(){
                            loadImages++
                            loaded();
                        }
                    }
                    img.onerror = function(){
                        console.log('load image fail' + imgArray[i]);
                        loaded();
                    }
                }
            return dfd.promise();
        }
        preloadImages([
            'http://img.dwstatic.com/5153/official_static/images/banner_01_bg.jpg',
            'http://img.dwstatic.com/5153/official_static/images/banner_02_bg.jpg'
        ]).done(function(){
            alert(1);
        })

第二是看网上的

        function preloadImg(list,imgs) {
            var def = $.Deferred(),
                len = list.length;
            $(list).each(function(i,e) {
                var img = new Image();
                img.src = e;
                if(img.complete) {
                    imgs[i] = img;
                    len--;
                    if(len == 0) {
                        def.resolve();
                    }
                }
                else {
                    img.onload = (function(j) {
                        return function() {
                            imgs[j] = img
                            len--;
                            if(len == 0) {
                                def.resolve();
                            }
                        };
                    })(i);
                    img.onerror = function() {
                        len--;
                        console.log('fail to load image');
                    };
                }
            });
            return def.promise();
        }
        var list = [
            'http://img.dwstatic.com/5153/official_static/images/banner_01_bg.jpg',
            'http://img.dwstatic.com/5153/official_static/images/banner_02_bg.jpg'
        ]

        var imgs = [];
        $.when(preloadImg(list, imgs)).done(
            function() {  
                console.log(imgs)
            }
        );

然后是同事的。感觉有些多余代码

preloadimages = function preloadimages( imgArray ){

            if( typeof imgArray ==='undefined' ) return;

            var list = [],
                loadedimages = 0
                postaction = function(){},
                imgArray = !isArray(imgArray)?[imgArray]:imgArray

            function imagesloaded (){

                loadedimages++

                if( loadedimages == imgArray.length ){
                    postaction(list)
                }

            }

            for( var i = 0; i < imgArray.length;i++){

                list[i] = new Image()
                list[i].end = false
                list[i].src = imgArray[i]

                if(list[i].complete){
                    list[i].end = true
                    setTimeout(function(){
                        imagesloaded()
                    },10)

                }else{

                    list[i].onload = function(){
                        this.end = true
                        imagesloaded()
                    }
                }

                list[i].onerror = function(){
                    imagesloaded()
                }
            }
            return {
                done:function(fn){
                    postaction = fn || postaction
                }
            }
        }