javascript - 使用 DOM 注入(inject)动态预取资源是否有效或有意义？

这主要是一个理论问题，我确实有一个实际目的。在深入实践之前，我首先会寻找一些概念性的答案，因为这个想法本身可能没有意义。

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

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

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

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

我对这个想法的问题:

它会起作用吗？当它在运行时动态插入到 DOM 中时，浏览器是否接受该指令？它会触发预取吗？

是否有时间冲突的可能性，如果预取确实有效，它没有及时完成，然后使用没有预取的“加载”？显然这可能发生，但它会产生不需要的副作用吗？

特定事件(如图像加载)是否仍能正常工作，还是在预取成功的情况下(假设它完全有效)从未触发？

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

最佳答案

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

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

关于javascript - 使用 DOM 注入(inject)动态预取资源是否有效或有意义？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25514725/