简体繁体 English

如何在不阻止OnLoad事件的情况下在页面上预加载图像？

[英]How to preload an image on my page without blocking OnLoad event?

原文 2012-01-03 19:18:17 4 1 javascript/ html/ image

I want my page to send a request for an image but I don't care when the image has finished downloading. 我希望页面发送图像请求，但是图像下载完成后不在乎。 This request should not block the OnLoad event from firing. 此请求不应阻止触发OnLoad事件。

If I use inline javascript to add this image tag to the page before the page has been loaded, it seems that the browser waits until the image has finished downloading before firing OnLoad, which is not what I want. 如果我使用内嵌javascript在页面加载之前将此图像标签添加到页面，似乎浏览器会等到图像完成下载后再触发OnLoad，这不是我想要的。

Is there a way to make the request for the image without blocking the OnLoad event? 有没有一种方法可以在不阻止OnLoad事件的情况下请求图像？ I noticed in IE9 if I set the image element source but don't append it to the DOM, then the browser makes a non-blocking request (which actually seems like a bug since I haven't put the element in the DOM yet, some speculative download at work?). 我在IE9中注意到，如果我设置图像元素源但不将其附加到DOM，那么浏览器会发出非阻塞请求（实际上这似乎是一个错误，因为我尚未将元素放入DOM中，一些投机下载在工作？）。 This doesn't behave the same in other browsers, though. 但是，这在其他浏览器中的行为并不相同。

I also tried setting a small Timeout before appending the element but that didn't help. 我还尝试在附加元素之前设置一个小的超时，但这并没有帮助。

Thanks. 谢谢。

1 个解决方案

Have you given a thought to using "DOMContentLoaded" in place of onload? 您是否考虑过使用“ DOMContentLoaded”代替onload？ It is supported by all browsers and is already there in IE9. 所有浏览器都支持它，并且IE9中已经提供了该功能。

And if you are targeting older versions of IE, you can use the readyState property. 并且，如果您以IE的较早版本为目标，则可以使用readyState属性。

I am not able to understand the whole point here, but by any chance, image element's own DOM events might be useful. 我无法理解这里的全部内容，但是，图像元素自己的DOM事件可能会很有用。