Aquí es un pequeño plugin que hice que le permite hacer exactamente esto, sino que también funciona en múltiples imágenes de fondo y múltiples elementos:
leer el artículo:
http://catmull.uk/code-lab/background-image-loaded/
o vaya directamente al código del complemento:
http://catmull.uk/downloads/bg-loaded/bg-loaded.js
Así que sólo incluyen el plugin y luego llamarlo en el elemento:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded();
</script>
descargar Obviamente el plugin y lo almacena en su propio alojamiento.
Por defecto se añade una clase adicional "bg-cargado" a cada elemento emparejado una vez que se carga el fondo, pero se puede cambiar fácilmente que haciéndolo pasar a una función diferente como esto:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded({
afterLoaded : function() {
alert('Background image done loading');
}
});
</script>
Aquí es un codepen demostrando que funciona.
http://codepen.io/catmull/pen/Lfcpb
Basta con asignar a la misma URL 'Imagen()' objeto que sí tiene evento 'onload'. –
asegúrese de ajustar la url de css en 'url()' – bluescrubbie