图像预加载器如何工作？

我很难弄清楚图像预加载器如何在java脚本中工作。 所以，如果有人能够解释他们如何与一个会帮助很多的例子。 没有jquery

Answer 1

加载一个图像

浏览器将asynchronous加载图像…意味着当浏览器被赋予一个图像的.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”函数来“callback”。 只要浏览器完成加载图像，浏览器将触发“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'); } 

预先加载多个图像

预加载多个图像：

• 创build一个数组来保存所有的图片url，并将图片url添加到该数组中。

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

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

   // For example var imgs=[]; 

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

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

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

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

• 使用图像URL数组将每个图像的.src设置为单独的url。

   // For example imgs[0].src = imageURLs[0]; 

• 在theImageHasFinishedLoadingcallbacktheImageHasFinishedLoading ，每次成功加载新图像时都会增加一个计数器。

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

这里有一个完整的示例代码和一个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>