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

Question

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

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

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

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

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

关于这个想法我的问题:

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

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

Answer 1

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

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