访问预加载的图像

时间:2011-10-31 09:43:58

标签: javascript jquery

我找到了一个预加载图片的脚本here,但我不知道如何访问它们。

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.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)

换句话说,我会采取chace [i] - 当预加载完成时 - 并附加到div。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您可以使用load活动。示例here

HTML:

<div id="test"></div>

使用Javascript:

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.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);
      $(cacheImage).load(function() {
          if(cache.length == args_len) {
              $(cache).each(function() {
                  $('#test').append(this);
              });
          }
      });
    }
  }
  $.preLoadImages(
      "http://images.free-extras.com/pics/c/car-530.jpg",
      "http://images.free-extras.com/pics/c/car-529.jpg",
      "http://images.free-extras.com/pics/c/cars-528.jpg"
  );
})(jQuery);