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

Slick: el carrusel para jQuery

Slick: el carrusel para jQuery

InstaStream: plugin para mostrar imágenes desde Instagram

InstaStream: plugin para mostrar imágenes desde Instagram

3D Box Control conTweenMax

3D Box Control conTweenMax

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

Sincronizando las secuencias con Bucardo

Sincronizando las secuencias con Bucardo

En esta entrada les mostraré cómo sincronizar las secuencias de una Base de Datos Postgresql empleando Bucardo.

Andrés Cruz 27-08-2015

4 formas de pintar mapas con jQuery y JavaScript

4 formas de pintar mapas con jQuery y JavaScript

Se muestran 4 plugins de pago/gratuitos para dibujar mapas vectorizados con HTML nativo en nuestra web a través de jQuery.

Andrés Cruz 25-04-2016