Question

I have found a script here that preloads images, but I dont know how can to access them.

(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)

In other words I would take chace[i] – when the preload finished – and append to a div. Any ideas?

Answer 1

You can use load event. Example 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);