En ocasiones, ocurre que el evento onLoad, por ejemplo, de una imagen no es lanzado a la hora de cargar una página.

Imaginemos que en el script de una página, una vez cargado el DOM, añadimos una función determinada cuando carga la imagen de cabecera:

<script type="text/javascript">
  // Función que ejecutamos al cargar el DOM de la página
  window.onload = function() {
    var cabecera = document.getElementById("cabecera");
    // Funcion lanzada cuando carga la imagen 'cabecera'
    cabecera.onload = function() {
      alert("carga completa");
   ;}
  }
</script>

Nos encontraremos con que en algún navegador (por ejemplo, Internet Explorer) lanza la primera vez el evento, pero en las posteriores cargas este no es lanzado.

La razón es que, en la segunda carga, la imagen se encuentra cacheada y por tanto el navegador carga la imagen en cuanto inserta el elemento IMG, lanzando el correspondiente evento onLoad. Como en ese preciso momento todavía estamos cargando la estructura de la página y el evento no ha sido asignado (no se asigna hasta la carga completa de la estructura), cuando queremos asignarlo ya es demasiado tarde.

Otros navegadores como Mozilla Firefox no lanzan los eventos hasta que se ha completado la carga del DOM, haciendo inexistente este problema.

Una solución sencilla es comprobar, después de asignar el evento onLoad a la imagen, si esta ya se encuentra cargada complétamente. Nos serviremos del parámetro complete. Si nos devuelve true, lanzamos el evento onLoad manualmente.

<script type="text/javascript">
  // Función que ejecutamos al cargar el DOM de la página
  window.onload = function() {
    var cabecera = document.getElementById("cabecera");
    // Funcion lanzada cuando carga la imagen 'cabecera'
    cabecera.onload = function() {
      alert("carga completa");
    }
    if (cabecera.complete == true) cabecera.onload();
  }
</script>

Actualización:

Me comenta Marc Palau (y con toda la razón) que el ejemplo anterior no es válido porque onLoad no es lanzado hasta que carga toda la página, incluidas las imágenes. En este caso, nunca seran llamados los eventos onLoad de las imágenes porque se están definiendo después de haberlas cargado.

Para reproducir el error, he preparado una prueba en la que se testea el framework jQuery y la función addDOMLoadEvent (el ejemplo que ponen en el enlace añade la imagen dinámicamente y no lo reproduce). Del mismo modo, se presenta una solución para ambas basados en el mismo procedimiento comentado antes.

5 Comentarios»

RSS feed de los comentarios. TrackBack URL
  1. Comment by Marc palau — 12 dUTC agosto, 2009 @ 0:55

    No hombre, te propongo dos soluciones:

    1. Buscar la función onDomReady, que se lanza al cargar el html.
    2. Insertar el bloque JS al final del documento eliminando el window.onload

    echame un mail manyana i te mando la 1

    saludos
    marc

  2. Comment by Dave Ruiz — 12 dUTC agosto, 2009 @ 7:38

    Hola Marc!.

    Tienes toda la razón. onLoad no es válido porque no se lanza hasta que no ha cargado toda la página, incluidas las imágenes.

    La cosa va a raiz de que $(document).ready de jQuery me dio problemas ayer en IE por esta razón cuando, creo yo, no tendría que darlos. Y así lo solucioné.

    Voy a investigarlo y actualizo la entrada.

    Gracias ;)

  3. Comment by Pedro — 24 dUTC noviembre, 2009 @ 23:06

    Yo cuando cargo un par de ventanas con imagenes en Google chrome, esta no las carga, solo muesta la mitad y aveces nada, pero cuando desconectas el modem, esta ya esta cargada completamente, eso me pasa.

    me llamo pedro y tengo 14 años

  4. Comment by josue — 10 dUTC abril, 2011 @ 1:16

    Bueno la solucion para esto, es cargar nuevamente la imagen, esto quiere decir cambiar el SRC de la img por la misma pero con un parametro aleatorio q la haga diferente :

    document.getElementById(‘img’).src = ‘/../miimagen.jpg?id=’+date();

    esa seria la soluc

    saludos…

  5. Comment by Dave Ruiz — 12 dUTC abril, 2011 @ 11:36

    Hola Josue.

    No es mala la alternativa. Sin embargo, obligas a volver a descargar las imágenes cada vez que cargas la página, con su consecuente consumo de ancho de banda y tiempo de carga.

    La solución que planteas es idónea para la carga de imágenes o páginas generadas en servidor, por ejemplo. Así te aseguras de que el usuario visualiza la imagen o página actualizada.

Deja un comentario

Please copy the string bDPq90 to the field below: