將圖片預加載到瀏覽器緩存中

當我提到JavaScript和jQuery時，如果我犯了一些明顯的錯誤，我幾乎是新手。將圖片預加載到瀏覽器緩存中

我目前正在嘗試製作一個展示大量藝術作品的圖庫。所以網站會有很多圖片。我注意到，當我在另一臺計算機上查看我的代碼時，圖像需要花時間加載。雖然在我的電腦上，他們會馬上顯示，我猜這是由於他們已經被緩存了。

因此，我做了一些環顧四周，看看我是否可以防止這一點，我發現很多人提到預加載圖像。但是，我無法真正找到符合我的願望的解決方案或我能理解的解釋（我討厭使用我不明白的代碼）。所以我試圖自己去做，但沒有成功，但我感覺到我寫的是正確的，但是需要調整，我將在下面寫下我的代碼，並且關於接下來需要做什麼的任何建議都是不勝感激。

預載圖片代碼：

var allImages = $(img).attr('src'); //select every image 
var preloadImages = []; 

//add images to empty array 
for(var i = 0; i < allImages.length; i++) { 
preloadImages.push(allImages[i]); 
} 

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

所以這是我寫給我的網頁上預裝圖像的代碼。讓我知道我要去哪裏錯了。我真的不知道我如何去選擇我的網站上的所有圖像，並將它們加載到一個數組中，然後我可以循環使用？

感謝您的回覆我想我沒有解釋我的問題。許多預加載圖像的解決方案似乎都是在每個圖像src into和array中手動輸入。我正在尋找的是一種方法來選擇我擁有的每個圖像，然後將它們放入一個數組中，而不用實際輸入它們。這可能嗎？我的理由是，當我不斷添加越來越多的圖像時，如果預加載可以自行處理，那將是非常棒的。

來源

2015-06-23 user3660857

可能的[複製]（http://stackoverflow.com/questions/476679/preloading-images-with-jquery），同時給出原生的JavaSript和jQuery解決方案。 – NightOwlPrgmr

代碼的第一行是什麼'img'？如果你的意思是「img」，我不認爲從頁面上實際的''元素中提取'src'的想法會幫助你預先加載任何東西，因爲那時瀏覽器已經知道所有這些圖像無論如何，他們的來源。 – nnnnnn

@nnnnnn這就是我的答案。不管它是什麼 - '.attr'只會給出一個元素的返回值。 – jcuenod

問題

$(img).attr('src');不給你所有的圖像陣列。

嘗試console.log你的allImages變量，你會看到第一個src屬性。

解決方案

你可以使用$.map：

var allImages = $('img'); 
var allImagesSrc = $.map(allImages, function (element){ 
    return $(element).attr('src'); 
    //Alternatively: return element.src 
});

來源

2015-06-23 11:33:06 jcuenod

或者'return element.src;'...... – nnnnnn

真的，用jQuery思考。更新 – jcuenod

將圖片預加載到瀏覽器緩存中

回答

相關問題