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

Como Detectar IE6

  • 02/04/2009
  • 10:35 pm
  • unijimpe

Uno de los grandes problemas al implementar websites es lograr la compatibilidad con la mayoría de los navegadores, pero el principal es Internet Explorer 6 pues presenta la mayor cantidad de bugs. Para ello les presentamos varias formas de detectar IE6 en diferentes lenguajes.

Detectar IE6 en HTML
Si queremos detectar IE6 en HTML podemos hacer uso de las formas condicionales, para ello detectamos exactamente si estamos en IE6.

  1. <!--[if IE 6]>
  2. Tu Contenido HTML
  3. <![endif]-->

Podríamos mejorar este código si detectamos si el navegador es menor a IE7 pues todas estas versiones tienen problemas con lo cual tendríamos:

  1. <!--[if lt IE 7]>
  2. Tu Contenido HTML
  3. <![endif]-->

Detectar IE6 en Javascript
Otro de los métodos es utilizar Javascript, para ello el método mas utilizado es:

  1. var is_ie6 = (
  2.     window.external &&
  3.     typeof window.XMLHttpRequest == "undefined"
  4. );

Ahora también existe una versión mas corta detectar IE6 propuesta por Dean Edwards:

  1. var isMSIE = /*@cc_on!@*/false;

Detectar IE6 en PHP
Ahora si la detección la queremos hacer al nivel de servidor podemos utilizar el siguiente script:

  1. $browser = $_SERVER['HTTP_USER_AGENT'];
  2. $browser = substr("$browser", 25, 8);
  3. if ($browser == "MSIE 6.0"){
  4.    // Accion a ejecutar para IE6
  5. }

Mas Información

Posts Relacionados

IE5-IE6 estandar con IE7.js

  • 28/03/2009
  • 11:15 am
  • unijimpe

IE7.js es una librería Javascript que permite hacer que Internet Explorer 5 y 6 se comporte como un navegador compatible con los estándares, es decir que corrige problemas de selectores de CSS e incluso los PNGs transparentes.

ie7

Características
Entre las características que presenta esta librería, tenemos selectores CSS, propiedades CSS y HTML, entre las cuales destacamos:

Selectores CSS

  • parent > child
  • :hover
  • :first-child
  • [attr]
  • [attr="value"]
  • [attr*="value"]
 Propiedades CSS

  • background-image
  • cursor
  • display
  • max-height
  • max-width
  • min-height
  • min-width
  • position
 HTML

  • PNGs transparentes
  • Doble margen
  • Contenido sin scroll

También corrige los PNGs transparentes y elimina el doble margen que se aplica cuando los divs están flotando a la izquierda.

Como utilizar esta librería
Para que IE5 y IE6 sean compatibles con Internet Explorer 6 se debe agregar las siguientes líneas al header de tu HTML.

  1. <!--[if lt IE 7]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
  3. <![endif]-->

Como se puede ver se hace uso de condiciones para cargar esta librería solo en el caso de que el Browser sea IE. También se puede descargar IE7.js para subirla a nuestro servidor, luego para incluir la librería tendríamos:

  1. <!--[if lt IE 7]>
  2. <script src="js/IE7.js" type="text/javascript"></script>
  3. <![endif]-->

PNGs Transparentes
Hay que tener en cuenta que para los PNGs transparentes estos deben tener nombre que termine en -trans.png, es decir nuestros archivos serían por ejemplo: logo-trans.png o también bg-trans.png.

Compatibilidad con IE8
Ahora que también tenemos disponible Internet Explorer 8 la cual trae nuevas propiedades, también esta disponible la librería para la compatibilidad con esta versión de IE.

  1. <!--[if lt IE 8]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
  3. <![endif]-->

Posts Relacionados