用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'; 

它创建了一个元素，但从来没有把它添加到页面 所以图像加载，但从未显示 检查萤火虫的网络面板，看看它加载。