JavaScript圖像預加載

Question

我正在查看網站DoNothingFor2Minutes如何用JavaScript預加載其圖像，並引發了一些問題。我注意到該網站並未預先加載所有圖片。事實上，您可能在網站上看到的一些第一批圖像沒有預先加載，包括背景圖像（海洋和太陽）和標題圖像（表示「2分鐘內不做任何事情」）

1 ）是否有一個原因，你不會預加載在頁面上立即使用的圖像？

2）它是否有意義或甚至可以預加載背景圖像？

3）當我查看頁面源代碼時，我看到很多未預加載的圖像，但沒有預加載的圖像（除了spread-the-calm.png）。是否有一些原因預加載的圖像不在頁面源中？

感謝您的幫助了。我有點新手

var preload = function(sources) { 
      var images = []; 
      var length = sources.length; 
      for(var i = 0; i < length; i++) { 
      images[i] = new Image(); 
      images[i].src = sources[i]; 
      } 
     } 

     preload(['facebook.png', 'facebook-hover.png', 'twitter.png', 'twitter-hover.png', 'like-background.png', 'spread-the-calm.png', 'tewy.png', 'tewy-hover.png', 'coderholic.png', 'coderholic-hover.png', 'box.png', 'box-hover.png', 'email-capture.png']); 

Answer 1

我猜測，該網站只是預加載將被用於CSS懸停圖片 - 當用戶懸停並且懸停圖像不可用並且必須加載時，用戶看不到任何閃爍/加載發生。

網站所有者認爲，對於所有其他圖像，可以加載它們部分正常週期

但是是 - 用戶特別注意不光滑的懸停轉換，所以這些都在進行優化。

Answer 2

爲什麼你需要預加載直接由頁面引用圖像？他們將被請求作爲頁面的源被解析遇到他們的引用。

預加載可能會用於顯示的圖像，例如，鼠標懸停在其他元素上。預加載意味着圖像已經被請求，並且圖像下載時不會有延遲。這可能是爲什麼你沒有在HTML中看到預加載的圖像。

Answer 3

1）通常情況下，您想要預先加載重要的圖像，並且應該馬上看到。巨大的圖片背景似乎並不需要馬上加載。

2）這是可能的，它確實取決於你的具體情況，不管它是否實用。

3）發展商，然後從他在JavaScript中創建的，而不是使用HTML的images數組引用圖像（例如，<img src="...