que - javascript evento al cargar la pagina

IE6: Evento de carga de imagen de fondo

Question

Estoy mostrando un montón de imágenes en miniatura y la latencia puede ser muy alta (a través de una VPN), así que envío todas las miniaturas en un solo archivo (como un sprite) y configuro las propiedades de imagen de fondo CSS y posición de fondo de un div para mostrar las miniaturas. El problema que tengo es con IE6 y averiguar cuándo se ha cargado la imagen ... Estoy usando el hack de BackgroundImageCache:

document.execCommand("BackgroundImageCache",false,true);

Para verificar cuando la imagen está cargada, uso este código:

$(''<img>'').attr(''src'', ''ThumbSpriteTest.png'').load(function() {
    $(''.Thumbnails'').css(''background-image'', ''url(ThumbSpriteTest.png)'');
});

Esto funciona en todos los navegadores que he probado, excepto en IE6 ... incluso con el hackeo de caché está cargando la imagen, disparando el evento, configurando la propiedad de la imagen de fondo y descargando la imagen de nuevo (y mis elementos .Thumbnail están en blanco mientras re-descargas).

Me parece que el hackeo del caché solo está cambiando el comportamiento de las referencias CSS y no la etiqueta img. ¿Cómo puedo saber cuándo se carga la imagen de fondo sin descargarla dos veces? ¿Es posible en IE6?

EDITAR: Usar: document.execCommand("BackgroundImageCache",true,true); Parece funcionar (con ambos parámetros como ''verdadero''). Tengo problemas para encontrar cualquier documentación sobre el comando BackgroundImageCache y sus parámetros (he encontrado muchos ejemplos de cómo usarlo para solucionar el problema de CSS, pero todos usan false,true como parámetros y no los explica). ¡ La recompensa sigue siendo buena para cualquier persona con buena información / documentación sobre el comando BackgroundImageCache y sus parámetros!

(No estoy seguro de por qué estoy emocionado de encontrar algo que funcione después de perder tantas horas debido a la deficiencia de IE)

Answer 1

1) propiedad css:

$(''<img>'').attr(''src'', ''ThumbSpriteTest.png'').load(function() {
    $(''.Thumbnails'').css(''background-image'', ''url(ThumbSpriteTest.png)'');
});

2) attr (''src'', '' ThumbSpriteTest.png '') - puede ser un problema

Los valores de algunos atributos se informan de manera inconsistente en todos los navegadores e incluso en versiones de un solo navegador. El método .attr () reduce tales inconsistencias.

Ver http://api.jquery.com/attr/

3) También:

<script type="text/javascript">
try {
 document.execCommand(''BackgroundImageCache'', false, true);
} catch(e) {}
</script>

O prueba CSS

html { 
filter: expression(document.execCommand("BackgroundImageCache", false, true)); 
}

los últimos ejemplos se encontraron aquí: problemas con el hover de Jquery IE6, sigue cargando la imagen de fondo

Answer 2

Esto definitivamente está mal documentado, ya que se considera un hotfix para ie6, y seguirá siendo así, ya que esto ya está solucionado en ie8. De todos modos, aquí está lo que se desentiende de ello.

Método execCommand: http://msdn.microsoft.com/en-us/library/ms536419(v=vs.85).aspx

 bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue]);
 //sCommand is the name of command to execute
 //[bUse...] is to give permission to display a dialog window (if applicable)
 //[vValue] value to pass as parameter to the command

[bUserInterface]: es solo un indicador booleano para un cuadro de diálogo, que no es usado por todos los comandos posibles. Pero se usa, por ejemplo, para guardar archivos / crear enlace / etc ... Por ejemplo: http://man.ddvip.com/web/dhtml/constants/createlink.html

Así que es posible que desee comprobar si este valor funciona cuando se establece en falso, debería funcionar en teoría ... Pero las revisiones pueden romperse por razones divertidas.

Acerca de la revisión: http://support.microsoft.com/kb/823727

De todos modos, esta característica solo aparece como un parche para IE6. Así que supongo que funcionará para todos los navegadores ie6. Si bien se introdujo para evitar múltiples fugas de carga +, y no "almacenar en caché" la forma en que lo está utilizando, todavía hace lo que el nombre sugiere (con suerte). Así que sorpréndase de que haya problemas en el camino en versiones no parcheadas (la actualización automática debería solucionarlo)

Con esa advertencia, detecte la ejecución para los valores booleanos de éxito o error, si tiene características que dependen de ella. Y supongo que haz lo mejor con lo que tienes (estar lo suficientemente triste como para ser obligado a apoyar ie6)

Answer 3

Si está utilizando su código anterior solo para IE6 y el problema solo se refleja en IE6, entonces supongo que su problema es el jquery ... verifique lo siguiente:

$(''.Thumbnails'').css(''background-image'', ''url(ThumbSpriteTest.png)'');

Tienes que agregar el ''url(img_src)'' .

Answer 4

primero debe insertar en DOM, luego adjuntar al evento img.load, luego poner src y todo debería funcionar en IE. El problema se debe a que IE no dispara el evento onload siempre que src se establezca antes que el controlador onload.

$(''<img style="display:none"/>'').appendTo(''body'').load(function() {
    $(''.Thumbnails'').css(''background-image'', ''url(ThumbSpriteTest.png)'');
}).attr(''src'', ''ThumbSpriteTest.png'');