加载单个图像

浏览器将异步加载图像…意味着向浏览器提供.src图像的时，它将开始在后台加载该图像，但也会在之后直接继续处理javascript代码.src

// create a new image object
var img=new Image();

// set the image object's image source
img.src='myImage.png';

// do some stuff while the image is loading in the background
alert('Your image has started loading, but is not yet complete');

该警报甚至会在图像完全加载并可以使用之前显示。

那么您如何知道映像何时完全加载并可以使用呢？

答：您可以告诉浏览器在完成图像加载后“给您回电”。通过在图像对象上添加“
img.onload”函数，您会得到“回调”。每当浏览器完成图像加载时，浏览器都会触发“ img.onload”功能中的代码。

img.onload = theImageHasFinishedLoading;

function theImageHasFinishedLoad(){
    alert('Your image has finished loading...you can use it now');
}

完整的图像加载过程将按以下顺序进行：

// happens 1st
var img=new Image();

// happens 2nd: this callback is ASSIGNED, but NOT TRIGGERED yet
//     until the image has fully loaded
img.onload = theImageHasFinishedLoading;

// happens 3rd
img.src='myImage.png';

// happens 4th
alert('Your image has started loading, but is not yet complete');

// happens 5th after the browser has fully loaded the image
//     (The browser will call this function automatically because .onload was set)
function theImageHasFinishedLoad(){
    alert('Your image has finished loading...you can use it now');
}

预加载多张图片

要预加载多个图像：

• 创建一个包含所有图像URL的数组，然后将图像URL添加到该数组。

  // For example
  

  var imageURLs=[];
  imageURLs[0]=’myImage.png’;

• 创建一个数组来保存所有图像对象（==您的实际图像）。

  // For example
  

  var imgs=[];

• 将new Image元素添加到图像对象数组（new Image为URL数组中的每个URL 添加一个）。

  //For example
  

  imgs[0] = new Image();

• 将每个图像对象的.onload回调设置为相同的函数。

  // For example
  

  imgs[0].onload = theImageHasFinishedLoading;

• 使用图片网址数组将.src每个图片的设置为单独的网址。

  // For example
  

  imgs[0].src = imageURLs[0];

• 在theImageHasFinishedLoading回调中，每次成功加载新图像时都增加一个计数器。

  // For example
  

  var counter=0;

  function theImageHasFinishedLoading(){
  counter++;
  }

当计数器达到与图像URL数组相同的长度时，您将知道所有图像都已完全加载。

    function theImageHasFinishedLoading(){
        counter++;
        if(counter>=imageURLs.length){
            alert('All the images have successfully preloaded. Go use them now!');
        }
    }

这是完整的示例代码和演示：

window.onload=(function(){





  // canvas related variables

  var canvas=document.getElementById("canvas");

  var ctx=canvas.getContext("2d");

  var cw=canvas.width;

  var ch=canvas.height;



  // put the paths to your images in imageURLs[]

  var imageURLs=[];

  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");

  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");



  // the loaded images will be placed in imgs[]

  var imgs=[];

  var imagesOK=0;

  startLoadingAllImages(imagesAreNowLoaded);



  // Create a new Image() for each item in imageURLs[]

  // When all images are loaded, run the callback (==imagesAreNowLoaded)

  function startLoadingAllImages(callback){



    // iterate through the imageURLs array and create new images for each

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

      // create a new image an push it into the imgs[] array

      var img = new Image();

      // Important! By pushing (saving) this img into imgs[],

      //     we make sure the img variable is free to

      //     take on the next value in the loop.

      imgs.push(img);

      // when this image loads, call this img.onload

      img.onload = function(){

        // this img loaded, increment the image counter

        imagesOK++;

        // if we've loaded all images, call the callback

        if (imagesOK>=imageURLs.length ) {

          callback();

        }

      };

      // notify if there's an error

      img.onerror=function(){alert("image load failed");}

      // set img properties

      img.src = imageURLs[i];

    }

  }



  // All the images are now loaded

  // Do drawImage & fillText

  function imagesAreNowLoaded(){



    // the imgs[] array now holds fully loaded images

    // the imgs[] are in the same order as imageURLs[]



    ctx.font="30px sans-serif";

    ctx.fillStyle="#333333";



    // drawImage the first image (face1.png) from imgs[0]

    // and fillText its label below the image

    ctx.drawImage(imgs[0],0,10);

    ctx.fillText("face1.png", 0, 135);



    // drawImage the first image (face2.png) from imgs[1]

    // and fillText its label below the image

    ctx.drawImage(imgs[1],200,10);

    ctx.fillText("face2.png", 210, 135);



  }







}); // end window.onload


body{ background-color: ivory; }

#canvas{border:1px solid red;}


<canvas id="canvas" width=400 height=200></canvas>