Lazy Load – Retrasar carga de Imágenes
Cómo ya sabemos el tiempo de carga de nuestro sitio es un factor SEO importante en este tiempo, es por eso que aprendimos a medir la velocidad de carga de un blog. Para disminuír aún más este tiempo, podemos usar Lazy Load.
Lazy Load es un script en jQuery que nos permite retrasar la carga de las imágenes hasta el momento que un usuario se acerqué a esa imágen, lo que nos disminuye considerablemente las peticiones http realizadas a un sitio.
Para agregar este excelente efecto debemos agregar el siguiente script a nuestro footer.php:
Pero debemos tener instalado jQuery en nuestro sitio, si no lo tienes agrega esto a tu footer.php:
Con esto ya tenemos la mayor parte hecha, sólo nos falta agregar el código que hará funcionar Lazy Load, que es este:
<script type='text/javascript'>
jQuery(document).ready(function($){
jQuery(".entry img").lazyload({
effect:"fadeIn",
placeholder: "http://img130.imageshack.us/img130/2134/ajaxloader.gif"
});
});
</script>
En este caso usamos #entry img, para que haga el efecto solamente en las imágenes de los posts, aunque podemos usar img (sin # ni .) para que haga el efecto en todas las imágenes del sitio.
También podemos usar una imagen de fondo, para que ocupe el lugar de la imagen original antes de cargarla. Podemos usar la misma imágen que usamos en el efecto cargando que hacemos con CSS.
P.D: Usamos los servidores de Google para alojar scripts.
23/03/2010
Marzo 23rd, 2010 a las 6:34 pm
Información Bitacoras.com...
Valora en Bitacoras.com: Cómo ya sabemos el tiempo de carga de nuestro sitio es un factor SEO importante en este tiempo, es por eso que aprendimos a medir la velocidad de carga de un blog. Para disminuír aún más este tiempo, podemos usar Lazy Loa......
Marzo 23rd, 2010 a las 8:16 pm
[...] efecto que se logrará será similar al de Lazy Load, pero con la diferencia que se cargará al final de todo lo demás, independiente de su [...]
Abril 2nd, 2010 a las 1:17 am
Muy interesante, lo pondré en práctica.
Abril 2nd, 2010 a las 10:38 am
@Snake: espero que te sea útil
Abril 2nd, 2010 a las 12:29 pm
No sabia que se podia hacer esto, voy a probarlo y les cuento... Seguro que algo se va a ahorrar
Abril 2nd, 2010 a las 4:02 pm
@Warez: pruebalo y nos cuentas
Mayo 12th, 2010 a las 4:32 am
Hola, una pregunta, esto se podría implementar en blogger?
Un saludo.
Mayo 12th, 2010 a las 2:23 pm
@blogero: por su puesto, debes hacer exactamente lo mismo que se muestra aquí y listo.
Saludos
Marzo 23rd, 2010 a las 5:47 pm
Lazy Load – Retrasar carga de Imágenes http://tinyurl.com/yc7cuk9
This comment was originally posted on Twitter
Marzo 23rd, 2010 a las 1:47 pm
Lazy Load – Retrasar carga de Imágenes http://tinyurl.com/yc7cuk9
Este comentario viene de Twitter