使用DOM注入動態預取資源還是有意義的？

Question

這在很大程度上是一個理論問題，我確實有一個實際目的。 在進入實踐之前，我首先要尋找一些概念性的答案，因為這個想法本身可能沒有意義。

想象一下完全基於javascript的幻燈片。 用戶在屏幕上看到一個大圖像，然后單擊以移動到下一個大圖像。 單擊后，將加載下一個圖像並將其插入DOM，替換前一個圖像。

我最近了解到，預取指令可以幫助加快下一次非常可能使用的資源的加載速度。 請注意，我說資源，而不是頁面。 幻燈片是單頁。

在圖像幻燈片中，很明顯可能需要下一個圖像，因此如果image1在屏幕上，我可以動態地將其添加到DOM：

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

我對這個想法有疑問：

• 它會起作用嗎？ 瀏覽器在運行時動態插入DOM時是否接受此指令？ 它會觸發預取嗎？
• 是否存在時序沖突的可能性，如果預取確實有效，那么在沒有預取的情況下使用“加載”之前它沒有及時完成？ 顯然這可能發生，但它會產生不必要的副作用嗎？
• 諸如圖像onload之類的特定事件是否仍然可以正常工作，或者它們是否在成功預取的情況下永遠不會被觸發（假設它完全有效）？

我做了很多搜索，但我無法在動態注入預取提示的這種特定情況下找到答案。

Answer 1

即使映像來自緩存， onload也會始終被觸發。 您不必擔心計時效果或競爭條件，任何此類行為都將成為瀏覽器錯誤。

正如評論中所提到的， rel=prefetch不是實現預取的唯一方法。 即使動態插入DOM，它仍然有效。 畢竟，您可以在沒有prefetch屬性的情況下獲取圖像並隱藏它。