Pregunta Precarga de imágenes con jQuery


Estoy buscando una forma rápida y fácil de cargar 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 hay complementos de jQuery que hacen esto, pero todos parecen un poco grandes (en tamaño); ¡Solo necesito una forma rápida, fácil y corta de precargar imágenes!


661
2018-01-24 21:25


origen


Respuestas:


Rápido y fácil:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

O, si quieres un plugin jQuery:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

945
2018-01-24 21:28



Aquí hay una versión modificada de la primera respuesta que realmente 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');
    });
}

95
2017-09-05 18:12



Use JavaScript Objeto de imagen.

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 onerror devolución de llamada e incremento loaded valorar o manejar 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');
});

50
2018-06-30 12:41



JP, después de verificar tu solución, todavía tenía problemas en Firefox donde no precargaría las imágenes antes de avanzar con la carga de la página. Descubrí esto poniendo un poco sleep(5) en mi script del lado del servidor. Implementé la siguiente solución basada en la tuya que parece resolver esto.

Básicamente agregué una devolución de llamada a su plugin de precarga jQuery, para que se llame después de que todas las imágenes estén cargadas 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(); }
    });
  });
};

Fuera de 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
  });
});

Espero que esto ayude a alguien que viene a esta página desde Google (como lo hice yo) a buscar una solución para precargar imágenes en llamadas Ajax.


34
2018-01-22 00:06



Este código jQuery de una línea crea (y carga) un img elemento DOM sin mostrarlo:

$('<img src="img/1.jpg"/>');

24
2018-04-02 21:37



$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

El uso es bastante simple:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/


21
2018-01-22 14:49



Tengo un pequeño complemento que maneja esto.

Se llama waitForImages y puede manejar img elementos o cualquier elemento con una referencia a una imagen en el CSS, p. div { background: url(img.png) }.

Si solo quieres cargar todas imágenes, incluidas las que se mencionan en el CSS, aquí es cómo lo harías :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

19
2018-05-06 00:07