我创建了一个简单的照片库查看器，我想在后台预加载图像，然后在完成后运行一个函数。
我的问题是，我该怎么做？
【问题讨论】：
标签： javascript image web gallery photos
要预加载图像，请使用<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 属性的预加载值允许你 在您的 HTML 中编写声明性获取请求，指定 您的页面在加载后很快就会需要的资源，您 因此希望在页面生命周期的早期开始预加载 在浏览器的主要渲染机制启动之前加载。这 确保它们更早提供并且不太可能 阻止页面的第一次渲染，从而提高性能。
文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
【讨论】：
与典型的 Javascript 函数相比，我喜欢这种 CSS 方法：
把它放在你的 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/
【讨论】：
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 属性，您可以在页面的任何位置绘制它，它会立即显示。
【讨论】：