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

Question

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

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

我最近了解到预取指令可以帮助加快接下来很可能使用的资源的加载速度。请注意，我说的是资源，而不是页面。幻灯片是单页。

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

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

我对这个想法的疑问：

• 它到底有用吗？当该指令在运行时动态插入到 DOM 中时，浏览器是否接受该指令？它会触发预取吗？
• 是否存在时间冲突的可能性，如果预取确实有效，则在使用“加载”而不预取之前它没有及时完成？显然这可能会发生，但是它会产生不需要的副作用吗？
• 诸如图像加载之类的特定事件是否仍然可以正常工作，或者在成功预取的情况下它们永远不会被触发（假设它完全有效）？

我进行了大量搜索，但无法找到有关动态注入预取提示的特定情况的答案。

Answer 1

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

正如评论中提到的，rel=prefetch这并不是实现预取的唯一方法。即使动态插入到 DOM 中它也能工作。毕竟，您可以获取没有prefetch属性的图像并将其隐藏。