HTMLpointHTMLpoint HTMLpoint.com


 Preload de imágenes 1/2

  semana 56 - 28 febrero 2000

El preload es un elemento típico de las filmaciones Flash, cuando el tamaño de los file que se quieren descargar comporta tiempos de espero más o menos largos. La lentitud de las conexiones Internet y alguna imagen con mayor peso de lo habitual hacen que a veces los tiempos de espera sean también excesivos incluso con páginas HTML. Javascript permite un efecto similar a las filmaciones Flas incluso para simples documentos HTML. El script de esta semana te lo mostrará.
Este script crea una página precedente a aquélla a la que hay que llegar, y mientras un contador progresivo muestra el estado del download, se van cargando las imágenes de la página sucesiva. De este modo, cuando el contador haya terminado su cuenta, la página sucesiva y todas las imágenes en ella incluidas se visualizarán inmediatamente.

El ejemplo consta de 3 file: Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

esempio.htm

Este file no está contenido en el zip adjunto. Se trata de la página principal, es decir, la página a la que queremos llegar y de la cual realizaremos el preload.
Para evitar el envío de un attach demasiado pesado, hemos insertado la página a la que queremos llegar, con todas las imágenes, en uno de los servidores de HTMLpoint, en concreto en:

esempio.htm

Esta página comprende a su vez 4 imágenes:

  • imagen01.jpg
  • imagen02.jpg
  • imagen03.jpg
  • htmlpoint.gif

    Hemos decidido publicar esta página en el Web también porque en local el tiempo de subida habría sido demasiado breve para poder comprobar el efectivo funcionamiento del preload.

    Desde un punto de vista técnico, se trata de una página HTML normalísima, que no prevé la inserción de ningún código Javascript. Es necesario, sin embargo, tomar nota de las imágenes insertadas para crear el preload de las mismas.

    esempio.htm

    Este file es el más importante por lo que se refiere al script, ya que contiene toda la sintaxis Javascript necesaria para su funcionamiento.
    Para que el script funcione es necesario intervenir en distintos puntos del código.

    Antes de nada, hay que impostar el código dentro de los campos <HEAD></HEAD> del documento. He aquí la sintaxis completa:


  •   Vuelve a principio de página