contenido 17 de abril de 2014 a las 09.24
   Imprimir artículo
elWebmaster.com

3 formas de precargar imágenes con CSS, Javascript y Ajax


hour_glass_loading_w1Precargar imágenes es una gran manera de mejorar la experiencia del usuario, ayudando a los usuarios sin mucho ancho de banda a disfrutar de una mejor experiencia al visualizar tu contenido. En este artículo, vamos a explorar tres técnicas diferentes de precargar para mejorar el rendimiento y la facilidad de uso de tu sitio web.

Cuando las imágenes se cargan previamente en el navegador, el visitante puede navegar por tu sitio web y disfrutar del tiempo de carga el cual va a ser muy rápido. Esto es especialmente beneficioso para las galerías de fotos y otros sitios de imágenes pesadas en las que se desea entregar el contenido de forma rápida y sin problemas, si es posible.

Método 1: Precarga con CSS y JavaScript

Hay muchas maneras de cargar previamente imágenes, incluyendo métodos que se basan en CSS, JavaScript y diversas combinaciones de los mismos.

Cada una de estas técnicas están basadas en métodos antiguos y que siguen siendo muy eficaces y adecuados para una variedad de escenarios en el diseño web.

Con el método, las imágenes son fácilmente precargadas y de manera efectiva utilizando el CSS a continuación:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;

Al aplicar estratégicamente los ID de precarga a los elementos (X)HTML existentes, podemos usar la propiedad background de CSS para precargar las imágenes fuera de la pantalla, en el background. Entonces, el tiempo en que las rutas de acceso a estas imágenes sigan siendo el mismo cuando se hace referencia a otras partes de la página web, el navegador utilizará las imágenes precargadas/en caché al renderizar la página. Simple, eficaz y no requiere JavaScript.

El método es eficaz para esto, sin embargo, hay espacio para la mejora. Las imágenes que están precargadas con este método se cargarán junto con el resto del contenido de la página, lo que aumenta el tiempo total de carga de la página. Para resolver este problema, podemos utilizar un poco de JavaScript para retrasar la precarga hasta después de que la página ha terminado de cargar. Esto se logra fácilmente mediante la aplicación de las propiedades de background del CSS, usando el script addLoadEvent():

// mejora en la precarga de la imagen @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
function preloader() {
if (document.getElementById) {
document.getElementById(“preload-01”).style.background = “url(http://domain.tld/image-01.png) no-repeat -9999px -9999px”;
document.getElementById(“preload-02”).style.background = “url(http://domain.tld/image-02.png) no-repeat -9999px -9999px”;
document.getElementById(“preload-03”).style.background = “url(http://domain.tld/image-03.png) no-repeat -9999px -9999px”;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);

En la primera parte de este script, estamos creando la precarga actual apuntando a elementos específicos de la precarga con estilos de fondo que llamen a las diferentes imágenes. Por lo tanto, al utilizar este método, tendrás que reemplazar la “precarga -01”, “precarga -02”, “precarga -03”, etc., con los identificadores que vas a tener como objetivo en tu margen de beneficio . Además, para cada una de las propiedades de fondo, tendrás que reemplazar la “imagen – 01.png “, “imagen – 02.png “, “imagen – 03.png ” , etc., con la ruta y el nombre de los archivos de las imágenes. No se requiere otro tipo de edición para que esta técnica funcione.

Luego, en la segunda parte del script, estamos utilizando la función addLoadEvent() para retrasar la ejecución de nuestro función preloader hasta después que la página se ha cargado .

Entonces, ¿qué sucede cuando no se dispone de JavaScript en el navegador del usuario? En pocas palabras, las imágenes no se cargan previamente y se cargarán de manera normal cuando se llamen en la página web.

Método 2: Precargar solamente con JavaScript

Este método es tan efectivo como el método anterior, en general, el anteior muchas veces puede considerarse tedioso y requiere mucho tiempo para implementar. En su lugar, se puede precargar las imágenes utilizando JavaScript. Aquí hay un par de métodos para precargar con JavaScript que funcionan muy bien en casi todos los navegadores modernos.

Método JavaScript #1

Discreto y fácil de implementar, simplemente editar/añadir la ruta o nombre necesario de las imágenes, no hay otra edición requerida:

<div class=”hidden”>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!–
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
“http://domain.tld/gallery/image-001.jpg”,
“http://domain.tld/gallery/image-002.jpg”,
“http://domain.tld/gallery/image-003.jpg”
)
//–><!]]>
</script>
</div>

Este método es adecuado para la precarga, especialmente con un gran número de imágenes.

Método JavaScript #2

Aquí hay otro método similar que utiliza JavaScript para precargar cualquier número de imágenes. Basta con incluir la secuencia de comandos siguiente en cualquiera de tus páginas web y edita de acuerdo con las siguientes instrucciones:

<div class=”hidden”>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!–

if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();

img1.src = “http://domain.tld/path/to/image-001.gif”;
img2.src = “http://domain.tld/path/to/image-002.gif”;
img3.src = “http://domain.tld/path/to/image-003.gif”;
}

//–><!]]>
</script>
</div>

Como puedes ver, cada imagen precargada requiere una definición de variable “img1 = new Image ();“, así como la declaración de la fuente, “img3.src =” .. / path/to/image-003.gif “; “. Al replicar el patrón, puedes precargar todas las imágenes que sean necesarias.

Incluso podemos mejorar este método un poco al retrasar la precarga de imágenes hasta después de la carga de la página. Para ello, simplemente envolvemos el script en una función y utilizamos addLoadEvent() para hacer que funcione:

function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();

img1.src = “http://domain.tld/path/to/image-001.gif”;
img2.src = “http://domain.tld/path/to/image-002.gif”;
img3.src = “http://domain.tld/path/to/image-003.gif”;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);

Método 3: Precarga con Ajax

Como si los demás métodos no fueran suficientes, aquí hay una manera de precargar imágenes utilizando Ajax. Este método utiliza el DOM para precargar no sólo imágenes, sino CSS, JavaScript, y casi cualquier otra cosa. La principal ventaja de utilizar Ajax por sobre JavaScript es que los archivos JavaScript y CSS pueden ser precargados sin su contenido sin afectar a la página actual.

window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘http://domain.tld/preload.js’);
xhr.send(”);
xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘http://domain.tld/preload.css’);
xhr.send(”);
// precargar imágen
new Image().src = “http://domain.tld/preload.png”;
}, 1000);
};

Como es, el código precarga tres archivos: “preload.js”, “preload.css”, y “preload.png”. El tiempo de espera es de 1000 ms está también ajustado para impedir que el script se cuelgue y que cause problemas con la funcionalidad normal de la página.

Para envolver las cosas, vamos a ver cómo la precarga de sesión se vería por escrito en JavaScript plano

window.onload = function() {

setTimeout(function() {

// reference to <head>
var head = document.getElementsByTagName(‘head’)[0];

// a new CSS
var css = document.createElement(‘link’);
css.type = “text/css”;
css.rel  = “stylesheet”;
css.href = “http://domain.tld/preload.css”;

// a new JS
var js  = document.createElement(“script”);
js.type = “text/javascript”;
js.src  = “http://domain.tld/preload.js”;

// preload JS and CSS
head.appendChild(css);
head.appendChild(js);

// preload image
new Image().src = “http://domain.tld/preload.png”;

}, 1000);

};

Fuente original del artículo: Perishablepress
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. don señor dice:

    muy buen trabajo, una preugnta….estas precargas son validas para precargar un video de fondo?

  2. Sergio dice:

    A mi me gustaria saber si se pueden luego referenciar desde html, por ejemplo desde una etiqueta img. Así ya he visto que no funciona

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder