IE9 problemas con el evento jQuery load() que no se activa

Question

Estoy intentando precargar un par de imágenes y me gustaría que mi página permanezca en espera hasta que se carguen todas las imágenes. Entonces, lo que estoy haciendo es esto:

var numPics = $('#bg img').length; 
var picsLoaded = 0; 
$('#bg img').load(function(){ 
    picsLoaded++; 
    if (picsLoaded == numPics){ 
     buildPage(); 
    } 

}); 

Esto funciona bien en todos los navegadores excepto (lo adivinaste) IE. De alguna manera, Internet Explorer descargará todas las imágenes (puedo ver que se cargan en las herramientas de desarrollo), pero solo se disparará aleatoriamente el load -Event (cada actualización me dará un número nuevo, por lo general contará hasta aproximadamente la mitad de las imágenes. Probé diferentes versiones de jQuery (inicialmente comencé con 1.6.1) y también leí sobre problemas como este en este sitio pero no pude encontrar ninguna respuesta todavía.

Tampoco parece ser un caché . problema relacionado como se revienta (o añadiendo una cadena de consulta al azar a la fuente de imagen) no hacer una diferencia

Answer 1

tratar de volver a asignar el origen de la imagen con el fin de desencadenar el evento:

var numPics = $('#bg img').length; 
var picsLoaded = 0; 
$('#bg img').each(function(index) { 
    var img = $(this); 
    img.load(function(){ 
     picsLoaded++; 
     if (picsLoaded == numPics){ 
      buildPage(); 
     } 
    }); 
    img.attr("src", img.attr("src")); 
}); 

Answer 2

+ para la respuesta: No haga funcionar esto en Firefox 3.6:

img.attr("src", img.attr("src")); 

Una cierta cantidad de imágenes no se cargará! Prefiero:

if($.browser.msie && parseInt($.browser.version, 10) >= 9) { 
    img_load.attr("src", img_load.attr("src")); 
} 

Answer 3

A partir de jQuery 1.8, $ .load() ya no se utiliza (http://bugs.jquery.com/ticket/11733) a favor de:

image.bind('load', function() {}); 

también el comentario de Puchu es interesante. Sin embargo, $ .browser ha quedado en desuso y usa el sniffing de UA. Este fragmento debería hacer el truco: https://gist.github.com/527683 (ver Javascript IE detection, why not use simple conditional comments?).

EDITAR: Este error persiste en IE 10. Además, el fragmento de código que he vinculado también no detecta IE 10, pero hay comentarios sobre soluciones temporales.

Answer 4

no se crea una fuente dinámica como muchos sugieren, todo lo que tiene que hacer es aplicar la fuente después de la unión del evento de carga así ...

$("img").load(function() {alert("loaded!"}).attr("src", imgSource);