| El problema |
| No todo el mundo goza de una maravillosa conexión a la red a velocidades del orden de los Mb/seg. Por ello es muy habitual que cuando se carga una página las imágenes (los elementos de más peso) sea lo último en mostrarse. A veces esto no tiene mayor importancia, pero en ocasiones es necesario concocer cuando se ha terminado de cargar una imagen de nuestra página (por ejemplo en un juego, o para un efecto rollover...) |
| La solución |
| La solución nos la da el modelo de objetos del explorador con el evento onload de los objetos imagen. Cuando una imagen se ha terminado de cargar lanza el evento onload (en otras palabras avisa al explorador de ese suceso). Podemos vincular ese efecto a la función que nos haga falta. |
| Un caso práctico |
|
Por ejemplo, supongamos que nuestra página tiene 10 imágenes
y queremos saber cuando se han cargado todas ellas. Un caso típico
en los juegos tipo puzle: debemos saber cuando se han cargado todos los
elementos antes de que el usuario pueda comenzar a jugar. numImagenes = 0; <img src="imagen1.jpg" onload="vincImgOnload( )"> Cada vez que una imagen termina de cargarse ejecuta la función vincImgOnload( ) que simplemente incrementa el contador de imágenes para comprobar a continuación si están todas cargadas, en caso afirmativo este ejemplo muestra una ventana alert. |