javascript:圖像預載入器如何工作？

Loading a single image

瀏覽器將異步載入圖像...意味着向瀏覽器提供 .src 圖片，它將開始在後台載入该圖片，但是在 .src之後也会直接繼續處理javascript代碼

// 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');
}

Pre-loading multiple images

要預載入多张圖片：

Create an array to hold all your image URLs and add your image URLs to this array.

 
// For example
var imageURLs=[];
imageURLs[0]='myImage.png';

建立一个陣列来儲存所有圖像物件（==您的實際圖像）.

// For example
var imgs=[];

添加 new Image 元素添加到圖像物件陣列（添加一个 new Image 對於網址陣列中的每个網址）.

//For example
imgs[0] = new Image();

設置每个圖像物件的 .onload 回撥到同一函式。

// For example
imgs[0].onload = theImageHasFinishedLoading;

使用圖像URL陣列設置 .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!');
        }
    }

Here's a full example code and a Demo:

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>