javascript - change - Precargando imagenes con jQuery

title css

Question

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 para lo que quiero!

Sé que hay jQuery plugins por ahí que hacen esto pero todos parecen un poco grandes (en tamaño); ¡Solo necesito una manera rápida, fácil y corta de precargar imágenes!

Answer 1

¡Gracias por esto! Debería agregar un pequeño riff a la respuesta del JP: no sé si esto ayudará a alguien, pero de esta manera no tiene que crear una serie 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: eliminar la necesidad de crear la matriz de imágenes y otro paso en el que las cosas se pueden estropear.

$("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 una 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 llamadas algo así como image_th.jpg, y todas las imágenes grandes correspondientes se llaman image_lg.jpg. El pulgar a grande simplemente reemplaza _th.jpg con _lg.jpg y luego carga todas las imágenes grandes.

Espero que esto ayude a alguien.

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

Este plugin 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.

Answer 6

Esto me funciona incluso en IE9:

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

Answer 7

JP: Después de comprobar su solución, todavía tenía problemas en Firefox donde no precargaba las imágenes antes de seguir adelante con la carga de la página. Descubrí esto al poner algo de 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 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
  });
});

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

Answer 8

Para aquellos que saben un poco de código de acción, puede buscar Flash Player, con un esfuerzo mínimo, y hacer un precargador de flash, que también puede exportar a html5 / Javascript / Jquery. Para usarlo si no se detecta el flash player, verifique ejemplos de cómo hacer esto con el rol de youtube en html5 player :) Y cree el suyo. No tengo los detalles, ya que aún no he empezado, si no lo he olvidado, lo publicaré más tarde y probaré un código Jquery estándar para el mío.

Answer 9

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 se muestra el cuadro del marcador de posición de la imagen hasta que se carga la imagen. Encontré una respuesta aquí que funcionó para mí: https://.com/a/10863680/2095698 .

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

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

Answer 10

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

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

// Usage:

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

Answer 11

Tengo un pequeño plugin que maneja esto.

Se llama waitForImages y puede manejar elementos img 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 que se mencionan en el CSS, aquí tiene cómo hacerlo :)

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

Answer 12

Todos los hipsters escribieron allí una versión propia, así que aquí está la mía. Agrega una división oculta al cuerpo y lo llena con las imágenes requeridas. Lo escribí en Coffee Script. Aquí está el café, el js normal y el js comprimido.

Café:

$.fn.preload = () ->
    domHolder = $( ''<div/>'' ).hide()
    $( ''body'' ).append domHolder
    this.each ( i, e) =>
        domHolder.append( $(''<img/>'').attr(''src'', e) )

Normal:

(function() {

  $.fn.preload = function() {
    var domHolder,
      _this = this;
    domHolder = $(''<div></div>'').css(''display'', ''none'');
    $(''body'').append(domHolder);
    return this.each(function(i, e) {
      return domHolder.append($(''<img/>'').attr(''src'', e));
    });
  };

}).call(this);

Comprimido:

function(){$.fn.preload=function(){var a,b=this;return a=$("<div></div>").css("display","none"),$("body").append(a),this.each(function(b,c){return a.append($("<img/>").attr("src",c))})}}.call(this);

Answer 13

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 múltiples etiquetas img 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, necesitará 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();
        }
    });
}

Answer 14

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

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

Answer 15

Utilice el 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 la onerror llamada en onerror e incrementando el valor loaded 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'');
});

Answer 16

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";

Answer 17

puede cargar imágenes en su html en algún lugar usando css display:none; gobierna, luego muéstralas cuando quieras con js o jquery

No utilice las funciones js o jquery para precargar, es solo una regla css Vs muchas líneas de js que se ejecutarán

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 cargarse en la página + tiene milisegundos para que el script se analice y ejecute, especialmente si son imágenes grandes, por lo que ocultarlas en hml también es mejor para el rendimiento. ¡Porque la imagen realmente está precargada sin ser visible en absoluto, hasta que demuestres eso!

Answer 18

    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*/
        }
    )

Answer 19

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

Answer 20

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

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

sólo para señalarlo :)