Precarga de imágenes con jQuery

Estoy buscando una manera rápida y fácil 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 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!

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 complemento jQuery:

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

// Usage:

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

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');
    });
}

Usar 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 no se carga al menos un recurso. Esto se puede solucionar fácilmente implementando la onerrordevolución de llamada e incrementando el loadedvalor 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');
});

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

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 carguen 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
  });
});

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

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

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

$.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/

Tengo un pequeño complemento que maneja esto.

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

Si simplemente desea cargar todas las imágenes, incluidas las referenciadas en el CSS, así es como lo haría :)

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

puedes cargar imágenes en tu html en algún lugar usando la display:none;regla css , luego mostrarlas cuando quieras con js o jquery

no use las funciones js o jquery para precargar es solo una regla css Vs muchas líneas de js para ejecutar

ejemplo: HTML

<img src="someimg.png" class="hide" alt=""/>

Css:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

La precarga de imágenes por jquery / javascript no es buena porque las imágenes tardan unos pocos milisegundos en cargar en la página + usted tiene milisegundos para que el script se analice y ejecute, especialmente si son imágenes grandes, por lo que ocultarlas en hml es mejor también para el rendimiento, ¡porque la imagen está realmente precargada sin ser visible en absoluto, hasta que lo demuestres!

este complemento jquery imageLoader es solo 1.39kb

uso:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

También hay otras opciones, como si desea cargar las imágenes de forma síncrona o asíncrona y un evento completo para cada imagen individual.

Una forma rápida y sin complementos de precargar imágenes en jQuery y obtener una función de devolución de llamada es crear varias imgetiquetas a la vez y contar las respuestas, por ejemplo

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

Tenga en cuenta que si desea admitir IE7, deberá usar esta versión un poco menos bonita (que también funciona en otros navegadores):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

¡Gracias por esto! Me gustaría agregar un pequeño riff en la respuesta del JP: no sé si esto ayudará a alguien, pero de esta manera no tiene que crear una matriz de imágenes, y puede precargar todas sus imágenes grandes si nombra tus pulgares correctamente. Esto es útil porque tengo a alguien que está escribiendo todas las páginas en html, y garantiza un paso menos para ellos, eliminando la necesidad de crear la matriz de imágenes y otro paso en el que las cosas podrían arruinarse.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

Básicamente, para cada imagen en la página, toma el src de cada imagen, si coincide con ciertos criterios (es un pulgar o imagen de la página de inicio) cambia el nombre (una cadena básica reemplaza en el src de la imagen), luego carga las imágenes .

En mi caso, la página estaba llena de imágenes de pulgar, todas denominadas algo así como image_th.jpg, y todas las imágenes grandes correspondientes se denominan image_lg.jpg. El pulgar a grande simplemente reemplaza el _th.jpg con _lg.jpg y luego precarga todas las imágenes grandes.

Espero que esto ayude a alguien.

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

Yo uso el siguiente código:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

Usaría un archivo de manifiesto para indicarle a los navegadores web (modernos) que también carguen todas las imágenes relevantes y las almacenen en caché. Utilice Grunt y grunt-manifest para hacer esto automáticamente y nunca más se preocupe por los scripts de precarga, los invalidadores de caché, CDN, etc.

https://github.com/gunta/grunt-manifest

Esto funciona para mí incluso en IE9:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Quería hacer esto con una superposición personalizada de la API de Google Maps. Su código de muestra simplemente usa JS para insertar elementos IMG y el cuadro de marcador de posición de la imagen se muestra hasta que se carga la imagen. Encontré una respuesta aquí que funcionó para mí: https://stackoverflow.com/a/10863680/2095698 .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

Esto precarga una imagen como se sugirió anteriormente, y luego usa el controlador para agregar el objeto img después de cargar la URL img. La documentación de jQuery advierte que las imágenes en caché no funcionan bien con este código de evento / controlador, pero me funciona en Firefox y Chrome, y no tengo que preocuparme por IE.

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

.attr('src',value) no .attr('src',this)

solo para señalarlo :)

5 líneas en coffeescript

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Para aquellos que conocen un poco de actionscript, puede verificar flash player, con un mínimo esfuerzo, y hacer un precargador flash, que también puede exportar a html5 / Javascript / Jquery. Para usar si no se detecta el reproductor flash, consulte los ejemplos sobre cómo hacer esto con el rol de youtube de vuelta al reproductor html5 :) Y cree el suyo propio. No tengo los detalles, porque aún no he comenzado, si no lo olvido, lo publicaré más tarde y probaré un código Jquery estándar para el mío.