funciona - JavaScript: saber cuándo una imagen está completamente cargada

javascript definicion

Question

Si tengo un faro:

<img src="http://example.com/beacon" />

Quiero que se llame a un método una vez que finalice la solicitud de baliza. Algo como:

<script>
    $("img.beacon").load(function() {
        // do stuff knowing the beacon is done
    });
</script>

¿Es posible? ¿Está en jQuery?

Answer 1

Aquí hay un código javascript simple que funciona en todos los navegadores:

var myImage = new Image();

myImage.onload = function() {
    var image_width = myImage.width;
    var image_height = myImage.height;
    $(''#pictureEl'').html(''<img width="''+ image_width +''" height="''+ image_height +''" src=''+ myImage.src + ''></img>'');           
};

myImage.src = myUrl;

Un fragmento de jQuery debe estar haciendo lo mismo, debajo del capó.

Answer 2

Otra opción, si le conviene: el evento onload ocurre inmediatamente después de que se carga una página o una imagen.

Como:

<img ... onload="alert(''test'');" />

Answer 3

Podría usar el evento onload que se activa cuando toda la página ha terminado de cargarse.

$(window).load(function(){
  //everything is loaded
});

Answer 4

Por supuesto. Recuerde que la carga debe agregarse antes del atributo src.

$(''<img />'').load( function(){
  console.log(''loaded'');
}).attr(''src'', imgUrl);

Si ha definido la etiqueta de la imagen en el marcado, entonces se atasca cuando se dispara el evento de carga de la ventana para asegurarse de que la imagen haya caído por el cable.

Answer 5

   <script type="text/javascript">
   $().ready(function() {

       $(''img#beacon'').attr(''src'', ''http://sstatic.net/so/img/so/logo.png'')
            .load(function() { alert(''Image Loaded''); })
            .error(function() { alert(''Error Loading Image''); });
   });
   </script>

Esto cargará el logo de .

Si se carga correctamente, la alerta (''Imagen cargada''); es interpretado

si falla, la alerta (''Error al cargar la imagen''); es interpretado

por supuesto, cualquiera de estos puede ser reemplazado por sus propias funciones.

Como nuevo usuario, rechazó mi etiqueta de imagen; pero la etiqueta de imagen solo debe contener el atributo id = ''beacon''; a menos que quieras agregar una clase. Aquí estamos configurando el atributo ''src'' en el código, por lo general, las imágenes que está monitoreando para completarse tienen valores src que se configuran de manera programática de todos modos.

Answer 6

$(''img.beacon'').load()

No siempre funcionará correctamente, usualmente hago esto:

$.fn.imageLoad = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger(''load'');
        }
    });
}

El código anterior también cubre los casos en que la imagen ha terminado de cargarse antes de que se ejecute el script. Esto puede suceder cuando define la imagen en el marcado.

Use así:

<img src=''http://example.com/image.png'' class=''beacon'' />
<script type=''text/javascript''>
$(document).ready(function(){ //document.ready not really necessary in this case
   $(''img.beacon'').imageLoad(function(){
      //do stuff
   });
});
</script>