如何在我的页面上预加载图像而不阻塞 OnLoad 事件？答案

【问题标题】：How to preload an image on my page without blocking OnLoad event?如何在我的页面上预加载图像而不阻塞 OnLoad 事件？
【发布时间】：2012-02-01 19:10:39
【问题描述】：

我希望我的页面发送图像请求，但我不在乎图像何时完成下载。此请求不应阻止 OnLoad 事件触发。

如果我在页面加载之前使用内联 javascript 将此图像标记添加到页面中，则浏览器似乎要等到图像完成下载才会触发 OnLoad，这不是我想要的。

有没有办法在不阻塞 OnLoad 事件的情况下发出对图像的请求？我在 IE9 中注意到，如果我设置了图像元素源但不将其附加到 DOM，则浏览器会发出非阻塞请求（这实际上似乎是一个错误，因为我还没有将元素放入 DOM 中，一些投机下载在工作？）。不过，这在其他浏览器中的行为并不相同。

我还尝试在附加元素之前设置一个小的超时，但这没有帮助。

谢谢。

【问题讨论】：

你不能预加载并且不能阻止onload。预加载的整个point 是为了确保当告诉浏览器显示图像时图像就在那里。也许您应该考虑在重要的地方使用文档就绪事件而不是 onload 事件。
感谢您的回复。我想我对“预加载”这个词的使用有点误导。我不关心图像何时可用，我的真正意图是通过发出这个请求让服务器开始工作（这几乎是一个一次性的请求）。这就是为什么我正在寻找一种在不阻塞 OnLoad 事件的情况下发出请求的方法。
如果加载前不需要，为什么之前调用呢？尝试使用 setTimeout 异步触发它并在任务队列中向下移动它。
我之前调用它的原因是因为请求最终会导致我的后端做一些工作，这可能与页面加载并行发生。因此，我越早提出这个一次性请求越好，但如果我阻止它，那么我没有改进任何东西。编辑：我确实尝试了 setTimeout 并没有看到任何立竿见影的改进，将继续使用它。
那么你为什么不使用<img> 标签，而不是使用XMLHttpRequest (ajax)？默认情况下是异步的。

【解决方案1】：

您是否考虑过使用“DOMContentLoaded”代替 onload？它被所有浏览器支持，并且已经存在于 IE9 中。

如果你的目标是旧版本的 IE，你可以使用 readyState 属性。

我无法理解这里的全部要点，但无论如何，图像元素自己的 DOM 事件可能会有用。

【讨论】：