DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
11-04-2016

Una medida necesaria en las webs actuales es que su carga sea rápida; hacer esperar unos pocos segundos a un internauta puede llevar a que este abandone el sitio, además que esta es una medida para que buscadores como Google de indexen mejor en sus búsquedas.

Icono web rápida

Un recurso que puede convertirse en un lastre son las imágenes que -dependiendo de la web- puede cargarnos de unos megas de mas y por lo tanto interrumpir la carga de otros elementos y con esto de la web en general; esto es un punto que debemos tener en cuenta al momento de incorporar estos tipos de recursos en nuestra web.

Imagen galeria Nasa

Truco para la carga de imágenes

Una posible solución a la situación anterior es emplear imágenes pequeñas en la definición del sitio web y luego -al cargar por completo la página web- cargar las imágenes con mayor resolución y reemplazarlas por las actuales que se encuentran en la web mediante un JavaScript asíncrono; de esta forma podemos acelerar bastante la carga de nuestra web.

Empleando jQuery para la carga asíncrona de imágenes

Siguiendo la solución propuesta anteriormente, primero debemos definir la estructura de nuestras imágenes que debe ser como la siguiente:

<div class="imagenes">
    <img src="pequena1.png" src2="grande1.png";>  
    <img src="pequena2.png" src2="grande2.png";>
    <img src="pequena3.png" src2="grande3.png";>  
</div>

En donde:

Ahora si podemos definir un sencillo código JavaScript con jQuery -aunque puede crear una solución similar con JavaScript nativo-; el JavaScript es el siguiente:

// recorro todas las imagenes de un grupo
$.each($('.imagenes img'), function (index, value) {

    // creo una imagen y le asigno el fuente de la imagen final
    var imgFinal = new Image();
    imgFinal.src = $(this).attr('src2');

    // establece una clase al estar cargada la imagen
    imgFinal.onload = function () {
        $(imgFinal).addClass('cargada');
    };

    // reemplazo la imagen pequena por la imagen final
    $(this).replaceWith(imgFinal);
});

Como puedes apreciar, podemos dividir el código anterior en 4 bloques:

El javaScript anterior puede ser modificado fácilmente para que trabaje con imágenes específicas (en la web hay muchas imágenes como en la cabecera u otras secciones que seguramente no deseas que carguen de manera asíncrona).

Sin nada más que agregar, dejo el enlace para su descarga:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

jQuery sharebox, plugin para compartir contenido

jQuery sharebox, plugin para compartir contenido

Monthly.js : Plugin de jQuery para eventos en el calendario

Monthly.js : Plugin de jQuery para eventos en el calendario

Efectos hover con CSS

Efectos hover con CSS

Algunos artículos que te pueden interesar

Escalado y recortando imágenes con Canvas

Escalado y recortando imágenes con Canvas

Con Canvas es posible escalar e incluso recortar imágenes dibujadas en el lienzo (en el Canvas) todo con sólo una función llamada drawImage().

Andrés Cruz 05-05-2014

Detectando la Orientación de un dispositivo con jQuery Mobile

Detectando la Orientación de un dispositivo con jQuery Mobile

En esta entrega veremos como podemos detectar o capturar la rotación de un dispositivo con jQuery Mobile.

Andrés Cruz 17-07-2014

El helper para crear nuestros captchas en CodeIgniter

El helper para crear nuestros captchas en CodeIgniter

Se explica como generar y configurar captchas en CodeIgniter empleando el helper correspondiente para dicho fin, además se habla de como validar el captcha con la respuesta del usuario.

Andrés Cruz 04-12-2017