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

Crear páginas de error 404

  • 19/04/2009
  • 1:33 pm
  • unijimpe

Un error 404 ocurre cuando un visitante no encuentra una página web, esto por que la dirección ingresada no existe, han escrito mal la dirección URL o por que la ruta ya no existe por que se editado o eliminado. Por defecto el browser muestra una pantalla indicando el tipo de error el cual es ininteligible para la mayoría de usuarios, por ello veremos la forma de personalizar este tipo de mensajes.

error404

Creando las paginas de error 404
Lo primero es editar el archivo .htaccess que esta en la raíz de nuestro servidor e incluir la siguiente línea de código, el cual hará que cada vez que no se encuentre el archivo solicitado se muestre la pagina error404.hml al visitante

  1. errorDocument 404 /error404.htm

Lo siguiente es crear este archivo, ahora como esta página es solo informativa no es necesario que sea indexada por los buscadores para ello es necesario agregarle un header indicando el tipo de error:

  1. <?php header("HTTP/1.1 404 Not Found"); ?>

Otra forma si no se tiene acceso a PHP es agregar un metatag en nuestro html para indicarle a los robots que no indexen la página:

  1. <meta name="robots" content="noindex, nofollow">

Lo que sigue es creatividad para crear un archivo de error personalizado. Si desean ver una muestra de diferentes paginas de error pueden visitar 404 Error Pages, One More Time.

Páginas de error personalizadas con Google
Si eres usuario de Google Webmaster Central podrás hacer uso de un widget para incluir en tus páginas de error 404, el cual sugerirá al visitante las urls semejantes a la ingresada e incluso un buscador, de esta forma le brindamos al usuario posibilidades de encontrar la información deseada.

Para utilizar este script, accedes a tu panel de Google Webmaster Central, seleccionas el dominio que deseas, luego accedes en el menu Tools - Enhance 404 pages, en donde encontrarás un código javascript el cual debes incluir en tus paginas de error.

  1. <script type="text/javascript">
  2.   var GOOG_FIXURL_LANG = 'es';
  3.   var GOOG_FIXURL_SITE = 'http://blog.unijimpe.net/';
  4. </script>
  5. <script type="text/javascript"  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>

De esta forma ya tienes una página de error personalizada y sobre todo que le dará al visitante las opciones necesarias para encontrar lo que busca.

Mas Información

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