Javascript 图像预加载程序是如何工作的？

我很难理解java脚本中图像预加载程序的工作原理。因此，如果有人能用一个很有帮助的例子来解释他们是如何工作的。

---

没有jquery加载单个图像

浏览器将异步加载图像…这意味着当浏览器获得图像的

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

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

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

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

• 创建一个数组以容纳所有图像对象（=实际图像）

• 将

  新图像

  元素添加到图像对象数组（为URL数组中的每个URL添加一个

  新图像

  ）

• 将每个图像对象的

  .onload

  回调设置为相同的函数

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

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

• 使用图像URL数组将每个图像的

  .src

  设置为单个URL

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

• 在图像已完成加载的

  回调中，每次成功加载新图像时，递增一个计数器
  
  // 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=（函数（）{
//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//将图像的路径放在imageURLs[]
var-imageurl=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");
//加载的图像将放置在imgs[]
var-imgs=[]；
var-imagesOK=0；
惊人加载所有图像（图像未加载）；
//为imageURLs[]中的每个项目创建新图像（）
//加载所有图像后，运行回调（=imagesAreNowLoaded）
函数startingAllimages（回调）{
//迭代imageURLs数组并为每个数组创建新图像
对于（var i=0；i可能是@MarcoDelValle的副本。前面的答案显示了有用的示例代码，但没有如提问者所希望的那样进行太多解释。；-）