jquery - body - Detecta carga de imagen

window after load jquery

Question

¿Es posible detectar una vez que se ha cargado una imagen con jQuery?

Answer 1

Creo que esto puede ayudarte un poco:

    $(''img'').error(function(){
        $(this).attr( src : ''no_img.png'');
 })

Por lo tanto, si se carga, se mostrará la imagen original. En el otro, se mostrará la imagen, que contiene datos con la imagen bloqueada o el encabezado HTTP 404.

Answer 2

El uso de la función jQuery on (''load'') es la forma correcta de verificar si la imagen está cargada. Pero tenga en cuenta que la función de encendido (''carga'') no funcionará si la imagen ya está en caché.

var myImage = $(''#image_id'');
//check if the image is already on cache
if(myImage.prop(''complete'')){ 
     //codes here
}else{
     /* Call the codes/function after the image is loaded */
     myImage.on(''load'',function(){
          //codes here
     });
}

Answer 3

Es fácil con jquery:

$(''img'').load(function(){
   //do something
});

Si lo intentaste con:

$(''tag'')html().promise().done(function(){ 
   //do something
}) ;

pero eso no comprobará si la imagen está cargada. Ese fuego hecho si el código es de carga. De lo contrario, puede verificar si el código fue hecho, luego disparar la función de carga img y verificar si la imagen está realmente cargada. Entonces hacemos una combinación de ambos:

$(''tag'')html(''<img src="''+pic+''" />'').promise().done(function(){ 
   $(''img'').load(function(){
     //do something like show fadein etc...
   });
}) ;

Answer 4

Es tan simple de usar Javascript simple:

  // Create new image
var img = new Image();

  // Create var for image source
var imageSrc = "http://example.com/blah.jpg";

  // define what happens once the image is loaded.
img.onload = function() {
    // Stuff to do after image load ( jQuery and all that )
    // Within here you can make use of src=imageSrc, 
    // knowing that it''s been loaded.
};

  // Attach the source last. 
  // The onload function will now trigger once it''s loaded.
img.src = imageSrc;

Answer 5

También he estado investigando esto durante mucho tiempo, y he encontrado este complemento para ayudar maravillosamente con esto: https://github.com/desandro/imagesloaded

Parece una gran cantidad de código, pero ... No encontré otra forma de verificar cuándo se ha cargado una imagen.

Answer 6

Puede usar el controlador de eventos .load() , así:

$("#myImg").load(function() {
  alert(''I loaded!'');
}).attr(''src'', ''myImage.jpg'');

Asegúrese de conectarlo antes de configurar la fuente, o el evento puede haberse disparado antes de adjuntar un controlador para escucharlo (por ejemplo, cargar desde la memoria caché).

Si eso no es factible (configurando el src después del enlace), asegúrese de verificar si está cargado y desenchúfelo usted mismo, así:

$("#myImg").load(function() {
  alert(''I loaded!'');
}).each(function() {
  if(this.complete) $(this).load();
});