¿Cómo puedo saber cuándo se cargó una imagen de fondo CSS? ¿Se disparó un evento?

Question

Tengo un widget de barra lateral que tiene un fondo de imagen.

Más de esto es un formulario de entrada de búsqueda. No quiero que se muestre la entrada antes de que se cargue la imagen.

¿Hay alguna manera de asociar un controlador de eventos load a imágenes de fondo CSS como elementos/objetos img normales?

Sé que esto podría hacerse en una imagen normal, pero me gustaría mantenerlo como un fondo de CSS porque la imagen es parte de un sprite. Estoy usando jQuery, por lo que las soluciones que usan jQuery o DOM DOM JS son igualmente buenas.

Answer 1

Puede cargar la misma imagen usando la imagen oculta DOM/a y enlazar al evento load en eso. El almacenamiento en caché del navegador debe tener cuidado de no cargar la imagen dos veces, y si la imagen ya está cargada, el evento debe dispararse inmediatamente ... no probado, difícil.

Answer 2

No establezca el fondo en css, pero cargue la imagen en una etiqueta img creada con javascript (o mejor, jquery). una vez cargada, activará el evento de carga. cuando se activa este evento, aplique la propiedad de estilo a su div

Answer 3

En Chrome, usar .ready() de jQuery parece funcionar para mí. Aquí está mi violín:

http://jsfiddle.net/pWjBM/5/

La imagen es sólo un azar que he seleccionado es razonablemente grande - que realmente se necesita mucho tiempo para cargar en algunos de mis pruebas, por lo que puede valer la pena sustituir con algo un un poco más pequeño Pero el resultado final es lo que quiere. Creo que lleva un tiempo cargar, y una vez que se carga, aparece la alerta y luego aparece el cuadro de texto (#txt). Parece que también funciona en Firefox; no estoy seguro acerca de otros navegadores.

EDITAR: Hah, parece funcionar en Chrome, Firefox y Safari. No funciona en IE8. Entonces ... funciona en todos los navegadores reales :)

EDIT2: Después de mucho alboroto, una combinación de Allesandro y mi propia solución parece para funcionar. Uso .ready() en un img oculto para detectar cuando la imagen está realmente cargada, y luego lo cargo en un fondo CSS.

http://jsfiddle.net/pWjBM/41/

HTML:

<div id="testdiv"> 
    <input type="text" id="txt" style="display:none;" /> 
</div> 
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" /> 

Javascript:

$(function() { 
    $('#dummy').ready(function() { 
     alert('loaded'); 
     $('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)'); 
     $('#txt').show(1000); 
    }); 
}); 

CSS:

#testdiv { 
    background:#aaaaaa none no-repeat right top; 
    width: 400px; 
    height: 400px; 
} 

#txt{ 
    margin-left: 180px; 
    margin-top: 140px; 
} 

NOTA: Hay un comentario a continuación de este trabajo no se porque puede cambiar la url de la imagen y todavía dispara el evento cargado. De hecho, esto funciona bastante exactamente como esperaba dado el código actual: no comprueba si la URL a la que apunta para su "imagen" es válida y realmente es una imagen, todo lo que hace es disparar un evento. cuando el img esté listo y cambie el fondo. La suposición en el código es que su url apunta a una imagen válida, y creo que cualquier otra verificación de error no es realmente necesaria dada la pregunta.