在web项目中经常须要用到的图片预加载结果。

下面的函数完成了一个我们想要的最基本的图片预加载结果

function preloadimages(arr){
    var newimages=[]
    var arr=(typeof arr!="object")? [arr] : arr  //确保参数老是数组
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
    }
}

我们能够经由过程以下的体式格局加载我们想要的图片：

preloadimages(['1.gif', '2.gif', '3.gif'])

上面的要领已能够满足我们最基本的预加载图片的结果了，但状况每每并不云云，我们每每须要确实的晓得图象是不是被真正加载完成，并可能在后续实行一系列对图片的操纵功用。荣幸的是，这个功用完成起来并不难，我们能够运用onload和onerror事宜去处置惩罚决议图片是不是加载完成（或许失利）。在本文的终究完成代码中，我们将会把proloadimages()函数改形成以下的模样。

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
 //当图片悉数加载完成以后，实行此处的代码
 //images参数是Array范例，对应加载进来的图象
 //images[0] 对应的是第一张图象
})

起首我们用image对象的onload和onerror事宜处置惩罚函数来检测图片的加载状况（胜利或失利），革新后的代码以下。

function preloadimages(arr){
    var newimages=[], loadedimages=0
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
            alert("图片已加载完成")
        }
    }
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
        newimages[i].onload=function(){
            imageloadpost()
        }
        newimages[i].onerror=function(){
        imageloadpost()
        }
    }
}

我们能够运用代码2的挪用要领测试该函数，当图片悉数加载完成（胜利或失利）后，浏览器将会弹出“图片已加载完成”的音讯。

如今，我们将为preloadimages()函数增添一个回调函数来处置惩罚后续的操纵。

一般我们会为我们的preloadimages()函数增添一个匿名函数做为参数，来完成我们须要的功用。云云以后，我们挪用preloadimages()函数的代码可能会以下面如许。

preloadimages(imagesarray, function(){
 //图片加载完成以后实行的操纵
})

然则我们如今来做一点点转变，让代码看起来更直观，更易于明白，革新完成以后，preloadimages()函数的挪用看起来以下所示。

preloadimages(imagesarray).done(function(){
 //图片加载完成后的操纵
})

上面这类写法人人一看肯定都邑以为异常清楚清楚明了，那末接下来，我们继承来革新我们的preloadimages()函数。

function preloadimages(arr){   

    var newimages=[], loadedimages=0
    var postaction=function(){}  //此处增添了一个postaction函数
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
          //加载完成用我们挪用postaction函数并将newimages数组做为参数通报进去
            postaction(newimages) 
        }
    }
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
        newimages[i].onload=function(){
            imageloadpost()
        }
        newimages[i].onerror=function(){
            imageloadpost()
        }
    }
    return { //此处返回一个空缺对象的done要领
        done:function(f){
            postaction=f || postaction
        }
    }
}

上面的代码，我们稍作修改了几个处所：

起首，我们增添了一个postaction函数，该函数被用来做为图片加载完成后的回调函数，用户能够在后面挪用的时刻用本身的处置惩罚函数覆蓋掉该函数。

第二，我们的preloadimages()函数返回了一个空对象，个中包括一个简朴的done()要领，这是完成本次革新的关键所在，确保了链式挪用的完成。

末了，我们的挪用变成以下情势：

 preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
   alert(images.length) //alerts 3
  alert(images[0].src+" "+images[0].width) //alerts '1.gif 220'
})

固然，我们还能够在done()里完成种种我们须要的图片操纵！