使用js预加载图像

Question

我使用this教程在我的网站上制作图像滑块。但我有超过100张图片。页面加载时很难加载所有内容。所以，任何预先加载~10张图像的技巧，例如，当我滑到第9张时，加载另外10张？

或者已经为jquery准备了一个插件来提供这个？

Answer 1

使用jquery，这很简单：

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

它创建了一个元素但从未将其添加到页面中 所以图像被加载，但从未显示过 检查firebug中的Net面板，看它是否已加载。

Answer 2

使用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");