La carga de imagen no funciona con IE 8 o inferior

Question

Mi objetivo es comprobar si la imagen se ha cargado correctamente. Ha funcionado bien en los navegadores modernos, pero IE8 o 7 es un problema terrible. Aquí hay un código de ejemplo:

var img = new Image(), 
    url = 'http://something.com/images/something.gif'; 

    $(img).attr('src', url).load(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      alert('broken image!'); 
     } 
     else { 
      alert('successfully loaded'); 
     } 
    } 

¿Alguien tiene alguna idea para solucionar este problema? Gracias en advace!

Answer 1

tiene que configurar el controlador de onload antes de establecer el valor .src.

En algunas versiones de IE, si la imagen está en el caché del navegador, el evento de carga se disparará inmediatamente cuando se establece el valor .src. Si su controlador de carga no está ya en su lugar, se perderá ese evento.

Además, naturalWidth y NO son compatibles con versiones anteriores de IE, por lo que siempre estarán indefinidos. Y debe usar onerror y onabort para detectar las condiciones de error.

No es necesario utilizar jQuery para esto. Usted simplemente puede hacer esto:

var img = new Image(), 

img.onload = function() { 
    alert("loaded successfully"); 
} 
img.onerror = img.onabort = function() { 
    alert("broken image"); 
} 
// only set .src AFTER event handlers are in place 
img.src = 'http://something.com/images/something.gif'; 

Answer 2

Si la imagen está rota, entonces el evento onload no se activará, en su lugar, se disparará el evento onerror. Así que hay que hacer como esto:

var img = new Image(), 
url = 'http://something.com/images/something.gif'; 

img.onload = function() { 
    alert('successfully loaded'); 
}; 

img.onerror = function() { 
    alert('broken image!'); 
}; 

$(img).attr('src', url); 

O con jQuery:

$(img).load(function() { 
    alert('successfully loaded'); 
}).error(function() { 
    alert('broken image!'); 
}).attr('src', url); 

Answer 3

var url="http://something.com/images/something.gif", 
    img=new Image; 
img.onload=img.onerror=function(ev){ 
    if(ev.type=="load")alert("successfully loaded"); 
    else if(ev.type=="error")alert("error loading"); 
} 
img.src=url; 
// If image is cached then no `onload` or `onerror` can occur. 
if(img.complete){ 
    alert("successfully loaded"); 
    img.onload=img.onerror=null; 
}