用js預加載圖像

Question

我用this教程在我的網站製作圖像滑塊。但我有超過100張圖片。加載頁面時很難加載所有內容。那麼，有什麼技巧可以預先加載〜10張圖像，當我滑入第9張時，例如，加載另外10張圖像？

或者有已經準備好的jquery插件提供了這個？

Answer 1

使用jQuery我用這個：

(function($) { 
    var cache = []; 

    $.preLoadImages = function() { 
    var args_len = arguments.length; 
    for (var i = args_len; i--;) { 
     var cacheImage = document.createElement('img'); 
     cacheImage.src = arguments[i]; 
     cache.push(cacheImage); 
    } 
    } 
})(jQuery) 

jQuery.preLoadImages("/images/img01.jpg","/images/img02.jpg"); 

Answer 2

與jQuery，這麼簡單的東西的工作原理：

$('<img />')[0].src = 'image.jpg'; 

它創建了一個元素，但從來沒有把它添加到頁面 所以圖像加載，但從未顯示 檢查螢火蟲的網絡面板，看看它加載。