Precargar Imagenes con JS

  • 26/04/2009
  • 10:25 pm
  • unijimpe

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.

Posts Relacionados

Precargar Imagenes con CSS

  • 12/04/2009
  • 9:02 pm
  • unijimpe

Cuando cargamos múltiples imágenes en un solo HTML o cuando cargamos imágenes de alta calidad, estas demoran en cargar y en ocasiones parece un error de diseño al no mostrarse ninguna imagen. Para ello agregaremos un pequeño precargador para indicar que la imagen se esta cargando.

csspreload

Bueno para problemas complicados, soluciones sencillas como lo explican en How To Add Image Loading Icon To Large Images Using CSS el cual consiste el colocar una imagen de fondo que simula un precargador, ello lo hacemos con CSS.

Obteniendo la Imagen
Lo primero es conseguir una imagen la cual utilizaremos para indicar que se esta cargando la imagen, para ello podemos hacer una búsqueda sencilla en Google de la siguiente forma:

http://images.google.com/images?q=loading+gif&imgsz=icon

Encontramos gran variedad de imágenes de precarga de donde escogemos el que mas nos agrade para nuestra web.

Creando el estilo
Ahora que ya tenemos la imagen, creamos un estilo llamado loading donde colocamos como fondo centrado horizontal y verticalmente si que se repita.

  1. .loading {
  2.     background: url(loading.gif) no-repeat center center;
  3. }

Luego para finalizar aplicamos este estilo a la imagen que deseamos, hay que notar que es recomendable colocar las dimensiones de la imagen para que el navegador reserve el espacio necesario para la imagen que es donde se mostrará el precargador.

  1. <img src="photo.jpg" width="250" height="150" class="loading" />

Pueden ver un ejemplo del funcionamiento de esta técnica en nuestro buscador de videos Sprytube. Seguramente este pequeño tip les servirá mucho para sus proyectos.

Posts Relacionados

Ajuste de Texto en iPhone

  • 21/12/2008
  • 10:16 pm
  • unijimpe

iPhone trae Safari como browser predeterminado el cual interpreta a la perfección las paginas HTML, además para facilitar la lectura tiene la propiedad de ajustar el tamaño del texto, es decir los textos son re-escalados y mostrados mas grandes mejorando la legibilidad pero en ocasiones alterando la distribución que habíamos planeado.

iphone-noresize

CSS para iPhone
Hay varias formas de detectar el browser para iPhone y aplicar CSS especificos pero uno de los mas sencillos es un selector especial que nos permitirá aplicar reglas solo aplicables al iPhone.

  1. @media screen and (max-device-width: 480px) {
  2.    /* iPhone CSS */
  3. }

Esto lo podemos incluir en nuestra hoja de estilos, con lo cual agregamos funcionalida para iPhone.

Ajustando el texto en iPhone
Para controlar el tamaño de los textos se puede hacer uso de la propiedad -webkit-text-size-adjust con el cual podemos indicar como interpretar el tamaño de las tipografías. Esta propiedas puede tener los siguientes valores:

  • none: el texto no será escalado y se mostrará en su tamaño original.
  • auto: propiedad por defecto y redimensiona los textos para mejorar la legibilidad.
  • nn%: porcentaje que indica con que factor de zoom se mostrarán los textos.

En mi caso prefiero que el texto no se re-escale para mantener el aspecto que tiene el diseño en los browser normales, entonces la hoja de estilos sería.

  1. @media screen and (max-device-width: 480px) {
  2.     html { -webkit-text-size-adjust: none; }
  3. }

Pueden encontrar mas información acerca de como preparar contenido para iPhone en Designing Content for iPhone.

Posts Relacionados