javascript - 在 Javascript 中预加载图像

Question

我创建了一个简单的照片库查看器，我想在后台预加载图像，然后在完成后运行一个函数。

我的问题是，我该怎么做？

Answer 1

var image = new Image();
image.src = "http://foo.com/myimage.jpg";

//if you have a div on the page that's waiting for this image...
var div = getElementById("imageWrapperDiv");

//you can set it on the image object as the item to draw into...
image.myDiv = div;

image.onload = function(){
  //do whatever you're going to do to display the image

  //so in this example, because I have set this objects myDiv property to a div on the page
 // I can then just populate that div with an img tag.
 //it's not the most elegant solution, but you get the idea and can improve upon it easily
  this.myDiv.innerHTML = "<img src='" +  this.src  +"'>";
}

一旦图像加载，它就会在浏览器的缓存中，因此，如果您使用 src 属性，您可以在页面上的任何位置绘制它，它会立即显示。