Javascript 使用DOM注入动态预取资源是否有效？

这在很大程度上是一个理论问题，对此我有一个实际的目的。在投入实践之前，我首先要寻找一些概念上的答案，因为这个想法本身可能没有意义

想象一个完全基于javascript的幻灯片。用户在屏幕上看到一个大图像，然后单击以移动到下一个大图像。单击后，将加载下一个图像并将其插入DOM，替换上一个图像

我最近了解到，预取指令有助于加快下一步很可能使用的资源的加载。请注意，我说的是资源，而不是页面。幻灯片是一个单独的页面

在图像幻灯片中，很明显可能需要下一幅图像，因此如果屏幕上显示了image1，我可以动态地将其添加到DOM中：

<link rel="prefetch" href="http://img.mysite.com/img2.jpg">

关于这个想法，我的问题是：

• 这样行吗？在运行时将该指令动态插入DOM时，浏览器是否接受该指令？它会触发预取吗
• 是否存在时间冲突的可能性，如果预取确实可以工作，它在使用前没有及时完成，在没有预取的情况下进行“加载”？显然，这是可能发生的，但它会有不必要的副作用吗
• 特定事件（如图像加载）是否仍能正常工作，或者在预取成功的情况下它们是否从未触发（假设它能正常工作）

---

我做了很多搜索，但我无法找到关于动态注入预取提示这一特定情况的答案。

onload

总是被触发，即使图像来自缓存。您不必担心时间效应或竞争条件，任何此类行为都将是浏览器错误

---

如注释中所述，

rel=prefetch

不是实现预取的唯一方法。即使动态插入DOM，它也可以工作。毕竟，您可以在不使用

预取

属性的情况下获取图像并将其隐藏。

您只需执行

（new image（））。src=url

，浏览器就会下载图像。如果您有合适的缓存头，当用户单击“下一步”按钮时，图像将从缓存中加载。@blender我感谢您的回答，但这不是问题所在。谢谢，这让我有足够的信心尝试一下。我不是说我不相信你，但是你知道在DOM中注入这种技术会起作用的来源是什么？谢谢，这是一篇非常有用的文章。但从技术上讲，它并没有提到动态预取资源，只是预呈现它们，这是不同的。在我看来，“在运行时注入预取提示”一节是顶级的，只是碰巧使用了预呈现作为示例。您声明“即使动态插入DOM，它也能工作。”这似乎只有在Chrome中才是正确的。你能澄清一下吗？