Precargar imágenes con jQuery

Estoy buscando una manera rápida y sencilla de precargar imágenes con JavaScript. Estoy usando jQuery si eso es importante.

Vi esto aquí ( http://nettuts.com... ):

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

¡Pero parece un poco exagerado para lo que quiero!

Sé que existen complementos de jQuery que hacen esto, pero todos parecen un poco grandes (en tamaño); ¡Solo necesito una forma rápida, fácil y breve de precargar imágenes!

Jan 25 '09 04:01

Aquí hay una versión modificada de la primera respuesta que en realidad carga las imágenes en DOM y las oculta de forma predeterminada.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Sep 05 '2011 18:09 Dennis Rongo

Utilice un objeto de imagen de JavaScript .

Esta función le permite activar una devolución de llamada al cargar todas las imágenes. Sin embargo, tenga en cuenta que nunca activará una devolución de llamada si al menos un recurso no está cargado. Esto se puede solucionar fácilmente implementando onerrorla devolución de llamada e incrementando loadedel valor o manejando el error.

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

Jun 30 '2012 12:06 Gajus

JP, Después de verificar su solución, todavía tenía problemas en Firefox donde no cargaba previamente las imágenes antes de avanzar y cargar la página. Descubrí esto poniendo algo sleep(5)en el script del lado de mi servidor. Implementé la siguiente solución basada en la suya que parece resolver este problema.

Básicamente, agregué una devolución de llamada a su complemento de precarga de jQuery, para que se llame después de que todas las imágenes se hayan cargado correctamente.

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

Por interés, en mi contexto, estoy usando esto de la siguiente manera:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

Con suerte, esto ayudará a alguien que llegue a esta página desde Google (como lo hice yo) en busca de una solución para precargar imágenes en llamadas Ajax.

Jan 22 '2011 00:01 Dave