div - Devolución de llamada jQuery en carga de imagen(incluso cuando la imagen está en caché)

onload jquery div

Question

Quiero hacer:

$("img").bind(''load'', function() {
  // do stuff
});

Pero el evento de carga no se dispara cuando la imagen se carga desde el caché. Los documentos de jQuery sugieren un complemento para solucionar este problema, pero no funciona.

Answer 1

¿Puedo sugerirle que lo vuelva a cargar en un objeto de imagen que no sea DOM? Si se almacena en caché, esto no llevará ningún tiempo y la carga se activará. Si no se almacena en la memoria caché, se activará la carga cuando se cargue la imagen, que debe ser el mismo que la versión DOM de la imagen termina de cargarse.

Javascript:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $(''#img'').attr(''src'') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

Actualizado (para manejar múltiples imágenes y con el adjunto onload correctamente ordenado):

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $(''#img'').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr(''src'') ;
    }) ;
}) ;

Answer 2

¿Realmente tienes que hacerlo con jQuery? También puede adjuntar el evento onload directamente a su imagen;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

Se disparará cada vez que la imagen se haya cargado, desde el caché o no.

Answer 3

Acabo de tener este problema, busqué en todas partes una solución que no implicara matar mi caché o descargar un complemento.

No vi este hilo inmediatamente, así que encontré otra cosa que es una solución interesante y (creo) que vale la pena publicar aquí:

$(''.image'').load(function(){
    // stuff
}).attr(''src'', ''new_src'');

De hecho, obtuve esta idea de los comentarios aquí: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

No tengo idea de por qué funciona, pero he probado esto en IE7 y dónde se rompió antes de que funcione.

Espero eso ayude,

Editar

La respuesta aceptada en realidad explica por qué:

Si el src ya está configurado, entonces el evento se dispara en la memoria caché antes de que obtenga el enlace del controlador de eventos.

Answer 4

Al usar jQuery para generar una nueva imagen con el src de la imagen, y asignarle el método de carga directamente, el método de carga se llama correctamente cuando jQuery termina de generar la nueva imagen. Esto está funcionando para mí en IE 8, 9 y 10.

$(''<img />'', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

Answer 5

Mi solución simple, no necesita ningún complemento externo y para casos comunes debería ser suficiente:

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on(''load'', function(){
                callback.apply(this);
            });
        }
    });
};

utilízalo así:

onImgLoad(''img'', function(){
    // do stuff
});

por ejemplo, para atenuar sus imágenes en carga puede hacer:

$(''img'').hide();
onImgLoad(''img'', function(){
    $(this).fadeIn(700);
});

O como alternativa, si prefiere un enfoque tipo jquery plugin:

/**
 * Trigger a callback when ''this'' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on(''load'', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

y utilízalo de esta manera:

$(''img'').imgLoad(function(){
    // do stuff
});

por ejemplo:

$(''img'').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

Answer 6

Puede resolver su problema utilizando el complemento JAIL que también le permite cargar imágenes perezosas (mejorando el rendimiento de la página) y pasar la devolución de llamada como parámetro

$(''img'').asynchImageLoader({callback : function(){...}});

El HTML debe verse como

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />

Answer 7

Si desea una solución CSS pura, este truco funciona muy bien: use el objeto de transformación. Esto también funciona con imágenes cuando están en caché o no:

CSS:

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML:

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

Ejemplo de codepen

Ejemplo de Codepen LESS

Answer 8

Si el src ya está configurado, entonces el evento se dispara en el caso del almacenamiento en caché, incluso antes de obtener el enlace del controlador de eventos. Para solucionar este problema, puede recorrer y activar y desactivar el evento basado en .complete , de esta forma:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Tenga en cuenta el cambio de .bind() a .one() para que el controlador de eventos no se ejecute dos veces.

Answer 9

Simplemente vuelva a agregar el argumento src en una línea separada después de que se haya definido el img oject. Esto engañará a IE para que active el evento lad. Es feo, pero es la solución más sencilla que he encontrado hasta ahora.

jQuery(''<img/>'', {
    src: url,
    id: ''whatever''
})
.load(function() {
})
.appendTo(''#someelement'');
$(''#whatever'').attr(''src'', url); // trigger .load on IE

Answer 10

También puede utilizar este código con soporte para error de carga:

$("img").on(''load'', function() {
  // do stuff on success
})
.on(''error'', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

Answer 11

Te puedo dar un pequeño consejo si quieres hacer esto:

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style=''position:absolute;width:100px;height:100px;z-index:0''/>
     <img onLoad="$(this).fadeIn(''normal'').siblings(''img'').fadeOut(''normal'')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

Si lo hace cuando el navegador almacena imágenes en caché, no hay problema, siempre se muestra img pero se carga img en imagen real.

Answer 12

Tuve este problema con IE, donde e.target.width no estaría definido. El evento de carga se activaría, pero no pude obtener las dimensiones de la imagen en IE (chrome + FF funcionó).

Resulta que necesitas buscar e.currentTarget.naturalWidth & e.currentTarget.naturalHeight .

Una vez más, IE hace las cosas de manera propia (más complicada).

Answer 13

Una modificación al ejemplo de GUS:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $(''#img'').attr(''src'');
})

Establecer la fuente antes y después de la carga.

Answer 14

Una solución que encontré https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (este código se tomó directamente del comentario)

var photo = document.getElementById(''image_id'');
var img = new Image();
img.addEventListener(''load'', myFunction, false);
img.src = ''http://newimgsource.jpg'';
photo.src = img.src;