Precargar Imagenes con JS

abril 27, 2009

Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una imagen, esta vez les presentamos una solución mas completa el cual incluye javascript.

jspreload

Creando los estilos
Lo primero es crear dos estilos, un estilo que contiene una imagen de precarga y otro que elimina la imagen de fondo.

  1. .loading {
  2. background: url(loading.gif) no-repeat center center;
  3. }
  4. .loaded {
  5. background: none;
  6. }

Cargando la Imagen de Precarga
Lo siguiente es cargar al inicio la imagen del precargador, esto para que se pueda mostrar como fondo de las imágenes a precargar. Esto lo colocamos en el header de nuestro html.

  1. <script type=“text/javascript”>
  2. loadImage = new Image();
  3. loadImage.src = “loading.gif”;
  4. </script>

Incluyendo las Imagenes
Lo que sigue es incluir las imágenes que deseamos mostrar, esto lo hacemos de la forma normal, pero le aplicamos el estilo .loading para mostrar la imagen de precarga.

  1. <img src=“img1.png” width=“512” height=“387” class=“loading” />
  2. <img src=“img2.png” width=“512” height=“387” class=“loading” />

Finalmente completamos el proceso creando un javascript que recorra todas las imágenes que contiene nuestro HTML, esto lo hacemos con la función getElementsByTagName, luego detectamos el evento onload de cada imagen para aplicarle el estilo que elimina la imagen de fondo.

  1. <script type=“text/javascript”>
  2. var imgs = document.getElementsByTagName(‘img’);
  3. for(i in imgs) {
  4. imgs[i].onload = function() {
  5. this.className = “loaded”;
  6. }
  7. }
  8. </script>

Este script lo colocamos al final del HTML antes del tag </body> y listo ya tenemos nuestro script de precarga de imágenes completo que lo podemos incluir en cualquier en cualquier página html. Pueden ver el ejemplo funcionando en jspreload.

Fuente: http://blog.unijimpe.net/precargar-imagenes-con-js/


Google penalizará a los anunciantes que tengan páginas lentas de carga

marzo 9, 2008

El buscador más usado del mundo penalizará a los anunciantes que usen su sistema AdWords y remitan a una página lenta en cargar. Para ello medirá el tiempo que tarda en redireccionar y cargar la página a la que te guía el anuncio.

La medida pensada por Google es debida a que según ellos, y yo personalmente también lo creo, la gente abandona las páginas que tardan mucho en cargar antes de que lo hagan.

Google modificará su sistema automatizado de promoción de anuncios teniendo en cuenta el tiempo de carga de los enlaces proporcionados por los anunciantes, dando mayor prioridad a los que tengan menor tiempo de carga. La medida se comenta en el blog de AdWords.