Javascript实现图片的预加载的完整实现

图片预加载是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()里实现各类咱们须要的图片操做！

 

 

源引：http://www.cnblogs.com/mz121star/archive/2012/11/01/javascript_preloadimages.html