如何用javascript或jQuery預加載多個srcset的圖像？

Question

我正在嘗試構建一個腳本來預載jQuery的圖像，這是我正在處理的一個小應用程序。

我讀過不同的教程和現在我設法把它的工作是這樣的：

var imageList = ['img1.png', 'img2.png', 'img3.png']; 
$.each(imageList, function (index, imageName) { 
    var $img = $('<img>')[0]; 
    $img.onload = function() { 
     console.log('loaded'); 
    }; 
    $img.src = imgPath + imageName; 
} 

這工作得很好。我從我準備的數組中加載圖像，然後創建所有img標記，然後將它們附加到需要的DOM中。

我想知道現在，但是，如果我有多個圖像srcset，我該如何做類似的事情。

比方說，我有3個大小爲每個圖像，但他們可能會更多，通常我會把這樣的事情在html：

<img srcset="large.jpg 1024w, 
     medium.jpg 640w, 
     small.jpg 320w" 
    sizes="(min-width: 36em) 33.3vw, 100vw" 
    src="small.jpg"> 

現在，我應如何運用預壓到這一點？我可以預先加載Javascript中每個圖像的所有尺寸，但這是毫無意義的，因爲具有多個srcset的整個目的是隻加載一個 2）我可以將img標籤放在DOM中，讓瀏覽器選擇所需的唯一大小並從Javascript加載。

第二個選項的問題是瀏覽器正在從DOM加載圖像，爲什麼要在Javascript中再次加載它們？這可能是我完全錯了，也許我錯過了一些東西。什麼是正確的方法來做到這一點？

Answer 1

你不能在Javascript中檢測瀏覽器寬度，並使用它來加載正確的圖像？你可以有一個小圖像陣列，一個用於中型，一個用於大型。

更好的是，如果您將圖像命名爲大小爲後綴（image1_small.png和image1_large.png），那麼您只需要一個數組，然後只需附加正確的後綴即可。

或者，根據窗口寬度，保持單獨的目錄，小/大/等，並給出正確的路徑。