加载单个图像
浏览器将异步加载图像…意味着向浏览器提供
.src图像的时，它将开始在后台加载该图像，但也会在之后直接继续处理javascript代码
.src
// create a new image objectvar img=new Image();// set the image object's image sourceimg.src='myImage.png';// do some stuff while the image is loading in the backgroundalert('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 1stvar img=new Image();// happens 2nd: this callback is ASSIGNED, but NOT TRIGGERED yet// until the image has fully loadedimg.onload = theImageHasFinishedLoading;// happens 3rdimg.src='myImage.png';// happens 4thalert('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.onloadbody{ background-color: ivory; }#canvas{border:1px solid red;}<canvas id="canvas" width=400 height=200></canvas>
