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属性，你可以在页面的任何地方绘制它，它会立即显示。

Answer 2

我喜欢这种CSS方法而不是典型的Javascript函数：

将其放在CSS文件中：

div#preload { display: none; }

将其放在HTML文档的底部：

<div id="preload">
   <img src="http://domain.tld/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://domain.tld/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="http://domain.tld/image-03.png" width="1" height="1" alt="Image 03" />
</div>

此方法可确保您的图像预先加载并可在文档中的其他位置使用。请记住使用与预加载图像相同的路径。

http://perishablepress.com/pure-css-better-image-preloading-without-javascript/

Answer 3

要预加载图像，请使用<link>标记，然后将preload添加到rel属性：

<link rel=preload href=path/to/the/image.jpg as=image>

或者使用Javascript：

var preImg = document.createElement('link')
preImg.href = 'path/to/image.jpg'
preImg.rel = 'preload'
preImg.as = 'image'
document.head.appendChild(preImg)

元素的rel属性的preload值使您可以在HTML中编写声明性获取请求，指定页面加载后不久将需要的资源因此想在页面生命周期的早期开始预加载加载，然后再启动浏览器的主要渲染机制。确保更早提供它们，并且不太可能阻止页面的第一个渲染，从而提高性能。

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

在Javascript中预加载图像

3 个答案: