En una charla con @SantiagoPehar me comentó que en algunos de sus sitios estaban utilizando un plugin que permite retrasar la carga de las imágenes para ahorrar algo de recursos en el servidor.
Cuando los visitantes acceden a nuestra página todos los elementos se cargan aunque no se estén visualizando, incluyendo hasta la última imagen del footer, este plugin lo permite hacer es bloquear la carga de las imágenes y mostrarlas sólo cuando el usuario las quiere ver.
Se trata simplemente de código JavaScript por lo que puede utilizar en cualquier sitio, incluyendo Blogger.
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://www.fileden.com/files/2008/8/27/2067942//jquery.lazyload.txt’ type=’text/javascript’/>
<script type=’text/javascript’>
jQuery(document).ready(function($){
jQuery(".post img").lazyload({
effect:"fadeIn",
});
});
</script>
El código anterior es el que tengo actualmente en el blog, debe ir en la cabecera, antes de la etiqueta </head>.
Puedes comprobar su funcionamiento si por ejemplo cargas la home y haces un scroll de página… las imágenes de los post irán apareciendo a medida que se muestran en la pantalla, no se cargan antes.
Si bien en Blogger no nos preocupamos por el consumo de recursos en el servidor (lo mantiene Google :P), nos puede resultar útil para acelerar la velocidad del sitio y evitar que se «tranque todo» cuando hay muchas imágenes en los post.
Explicando el código:
– La línea roja carga la librería jquery directamente desde las API de Google.
– La línea azul carga el plugin Lazy loader, está alojado en el servicio gratuito ofrecido por Fileden en formato TXT (más información). También se puede descargar desde acá.
– Finalmente las líneas verdes ejecutan el Lazy load, aquí también se pueden generar algunos efectos y optimizaciones, en este caso simplemente aplico un efecto de fadeIn en las imágenes de los post, también se podría aplicar en todas las imágenes del sitio cambiando .post img por img.
Por más información puedes visitar la página del plugin, si tienes alguna duda con la implementación puedes dejar un comentario o pasar por el foro de ayuda.
Ver también:
Medir la velocidad de carga del blog.
Botón de Retweet en Blogger (Topsy).