miércoles, 26 de enero de 2011

Precargar elementos CSS, JS, JPG ...

Como utilizar la precarga de elementos en nuestra web. Este metodo se usa para ir cargando elementos de la web que todavia no se estan visualizando.
Por ejemplo en la página principal donde poner una bonita presentación antes de darle a ENTRAR podemos ir cargando en cache las CSS o JS u otras imágenes que utilizaremos pasado esa pequeña Introducción. Código:

window.onload = function () {
     var i = 0, max = 0, o = null,
     preload = [
          'http://example.com/imagen.png',
          'http://example.com/javascript.js',
          'http://example.com/estilos.css'
     ],
     isIE = navigator.appName.indexOf('Microsoft') === 0;
     for (i = 0, max = preload.length; i < max; i += 1) {
          if (isIE) {
               new Image().src = preload[i];
               continue;
          }
          o = document.createElement('object');
          o.data = preload[i];
          //o.width = 1;
          //o.height = 1;
          //o.style.visibility = "hidden";
          //o.type = "text/plain"; // IE
          o.width = 0;
          o.height = 0;
          document.body.appendChild(o);
     }
};

Cuidado con abusar en la carga de muchos elementos ya que ralentiza la web. Aunque en las páginas sucesivas puede aumentar considerablemente la velocidad.