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).
y creo que esta mas rápido la verdad mi blog es de puras fotos y necesito que sea mas rápida para no molestar a los visitantes..un saludo muchas gracias por todos los trucos
@Anónimo, chequea la documentación… el código que debes usar en WP no es el mismo que aparece publicado acá.
Googleando también me encontré con que hay un plugin para WP :D http://www.nosolocodigo.com/jquery-lazy-load-para-wordpress-reduce-tiempo-de-carga
@Manuel, no se bien qué es lo que pasa… en los comentarios del sitio varias personas comentan lo mismo y al parecer, por lo que leí al pasar, hay que hacer unas modificaciones.
coloque el codigo modificado a header.php de mi wordpress y no veo nada diferente.
cambie la linea de codigo que me dijeron y nada
La verdad no creo que esto funcione.
Hice una prueba limpiando completamente la caché y el historial de Firefox, luego entré al home de tu blog, esperé a que terminara de cargar y desconecté el cable del Internet. Entonces deslicé la barra de scroll hasta el footer y las imágenes fueron apareciendo una tras otra aún sin conexión. Eso significa que ya las había cargado previamente y solamente las ocultó.
En lo personal he desactivado el plugin, no sé qué opines al respecto.
Yo hice un post con estos scripts para alojarlos en la plantilla, dejo el post acá para hacer spa… digo por si a alguien le interesa: http://usuariobienanonimo.blogspot.com/2010/09/lazy-load-para-alojar-en-la-plantilla.html
Intalado en mi blog (www.humor-sin-limites.com) funciona de 10 + IVA
Gracias, lo probé cambiando eso que dijiste y funciona muy bien. No lo quiero tener ahora, no tengo muchas imágenes, por eso. Si lo necesito lo pongo, me gusta lo que hace.
Anónimo: hacé lo que me dijo Ale (cambiar .post img por img o fijate si te sirve el plugin de WP: http://wordpress.org/extend/plugins/jquery-image-lazy-loading/
lo puse en el header.php de mi wordpress pero no vi ningun efecto en la pagina
@Usuario bien anónimo, el código publicado es sólo para post, se puede cambiar jQuery(".post img").lazyload({ por jQuery("img").lazyload({ para afecte a todas las imágenes de Blogger.
No funciona en los avatares, puede ser? Es sólo para los posts?
Gracias Alejandro, ya lo tengo en el blog, el script lo he alojado en la plantilla, funciona perfecto. Saludos!
Hola, muchas gracias, hace mucho tiempo deseaba mirar este efecto en mi blog, pero pense que solo era posible en WordPress.
Gracias a todos por sus respuestas. Si recuerdo haber leído algo sobre dicho conflicto en Vagabundia. Voy a ver si puedo lograr tener las 2 librerías. Aunque, la verdad no se si sea muy recomendable. Gracias.
hola, necesito saber en que archivo de wordpress se pone este codigo.
Aca hay info sobre como utilizar las dos librerías y evitar conflictos: http://api.jquery.com/jQuery.noConflict/
$ es un alias de jQuery, así que una más facil es directamente usar jQuery('…')
Creo que en Vagabundia se explicó una vez cómo usar Scriptaculous y jQuery al mismo tiempo sin que generen conflictos. Busqué la entrada pero no la encontré, aunque el punto es que es posible usar ambos.
@Jorge, si es posible que se generen "conflictos" y no funcione bien.
Me imagino que si estamos usando otros Frameworks, en este caso scriptaculous y prototype lazy load no funcionaria porque usa jQuery, Estoy en lo correcto?
¡Lo único que me hizo fue mover las imágenes a la izquierda!
Había visto ese efecto en muchos blogs pero creí que era exclusivo de WordPress. Guardo la entrada en favoritos para agregarlo más tarde. :)