Unveil es una excelente solución a la hora de economizar transferencia de datos en nuestro servidor. Utiliza la técnica lazy load, la misma permite cargar las imágenes bajo demanda, esto se traduce directamente en una aumento del rendimiento del servidor ya que no se cargan imágenes de forma innecesaria.
A diferencia de otros plugins jQuery este tiene un peso extraordinario, menos de 1kb. Algo que no siempre tenemos en cuenta y que en plugins de este tipo puede que ocurra que la transferencia ahorrada termina no siendo tanta ya que el plugin que realiza la descarga bajo demanda pesa más que las imágenes que no descargamos.
Ejemplo de Lazy Load:
Estructura HTML básica, preparada para dispositivos con Retina Display:
<img src="bg.png" data-src="img1.jpg" /> <img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />
Si se preocupan por los usuarios que no tienen activado JavaScript pueden utilizar la etiqueta noscript sin ningún tipo de problemas:
<noscript> <img src="bg.png" src="img1.jpg" /> </noscript>
Finalmente ejecutamos el plugin:
$(document).ready(function() {
$("img").unveil();
});
Una opción interesante es la de activar la carga dinámica de imágenes partiendo de determinada posición, por ejemplo los 200px:
$("img").unveil( 200 );
Visualmente el plugin también hace un buen trabajo, las imágenes muestran una bonita animación en el espacio donde se van mostrando descargando los archivos, indicando al usuario que se esta realizando la descarga de una imagen.
El proyecto completo se encuentra liberado bajo licencia MIT.
Unveil es una de las mejores soluciones que pude probar hasta el momento, por mi cuenta tengo pendiente realizar algunas pruebas con algunos proyectos míos que vienen pidiendo hace tiempo la integración de lazy load en las imágenes 😀
Web: Unveil
