Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Acelerar la carga de las páginas en blogger con Lazy load

Cuando un lector accede a tu blog, todos los elementos que componen la plantilla y especialmente las imágenes se cargan al mismo tiempo -a pesar de no estarse visualizando-. Al instalar Lazy load, plugin de jQuery, bloqueamos la carga de imágenes y hacemos que únicamente se muestren cuando el usuario desea verlas, es decir, a medida que baja por la página.

Diseño>Edición de HTML>expandimos artilugios


Busca la etiqueta </head> y añade esto encima:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/blcnlazzy' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
jQuery("img").lazyload({
effect:"fadeIn",
});
});
</script>

La primera línea del bloque es la librería jquery (1.4.2) y se carga directamente desde las API de Google.

El término resaltado en naranja (img) representa a todas las imágenes del blog. Si tan solo deseas aplicar el truco a las imágenes de las entradas, utiliza el término .post img.

Guarda la plantilla y comprueba el resultado. Accede a la portada de tu bitácora y realiza un scroll de página hacia abajo para visualizar la aparición de toda imagen o icono.

Utilizando este script evitarás que se "atasque todo" cuando publicas muchas imágenes en los artículos.

Si tienes alguna duda con la implementación deja un comentario.

Eduardo Lozada dice...

Muy bueno Jaime, un truco de lo mas sencillo y efectivo. Me biene muy bien porque mi blog es de viajes y bueno, sabes que necesito muchas fotos!

Un saludo y gracias.

Jaime Trujillo Escobedo dice...

Eduardo, para un blog de viajes este truco es toda una joya. Comprobarás que cada apartado carga con mayor rapidez.

¡Saludos!

Toni dice...

Muy buen script, me fue muy util, gracias por compartirlo :)

Un cordial saludo :D

Mauricio dice...

Muchas gracias pana lo apliquè en mi blog y quedò de lujo, tenia dias buscando el truco pero como no sabia el nombre ''Lazy Load'' me tarde mas de la cuenta xD. Saludos

Jaime Trujillo Escobedo dice...

Toni, se muestra a la perfección en tu blog de fondos. Gracias a ti por comentar. ¡Saludos!

Jaime Trujillo Escobedo dice...

Mauricio, normalmente el nombre de plugins para jQuery se muestra en inglés y por tanto podemos olvidarlo facilmente. Me alegra que lo hayas encontrado e implementado en tu blog. Un saludo.

Yo dice...

Buenísimo!, me funcionó perfecto. Me gustó mucho la animación de suavizado que hace al aparecer las imágenes, este script está de lujo :) Gracias Jaime, saludos desde Colombia.

Jaime Trujillo Escobedo dice...

Efectivamente Yo, con este script no solo aceleraremos la carga del contenido si no que además estaremos aplicando un efecto precioso en las imágenes.

¡Saludos desde España!

Cocofansclub dice...

Hola Jaime!me gusta mucho este truco sobre todo que mi blog tiene muchas imagenes,pero podrias decirme si en mi blog funcionaria ya que uso otra libreria (Scriptaculous)
gracias
claudia

Aurora dice...

Buenos días, una duda, ¿es incompatible si tengo en mi plantilla Scriptoculous? Leí una vez que ambos scripts dan problemas si se ponen a la vez. Si fuera así y sabe alguien una solución, lo agradecería enormemente.
Un saludo.

Oposiciones dice...

Graciassssssssssssssssss. Con mis cacharros viejos me va a venir fenomenal.

Jaime Trujillo Escobedo dice...

Claudia y Aurora, como ambas tenéis instalado scriptaculous en la plantilla os daré la misma respuesta...

Es cierto, Scriptaculous muestra problemas al utilizarse junto a jQuery pero afortunadamente existe una forma de utilizar ambas librerías.

Probablemente publicaré una entrada al respecto para que instalar este y otros trucos en un blog sea posible.

¡Abrazos para las dos!

Jaime Trujillo Escobedo dice...

Estoy seguro de ello, Oposiciones.

Cocofansclub dice...

:D Gracias Jai!!esperaba esa respuesta!haz todo lo posible por darnos esa solucion!!!
un beso grandoteee!!

Aurora dice...

Gracias, Jaime. Si conoces algún enlace que me pueda servir ¡ya me sería más q suficiente! La verdad es que otras veces me he encontrado con este problema y lo llevo arrastrando desde hace tiempo.

Jaime Trujillo Escobedo dice...

Haré todo y más, Claudia. Pronto disfrutarás del tutorial.

Jaime Trujillo Escobedo dice...

Gracias a ti Aurora. ¿Enlace a un tutorial? Aún no conozco ninguno pero seguro que en Google encuentras la solución.

Yo explicaré un procedimiento que seguí al crear una plantilla para una galería de imágenes en la que utilizaba efectos de Scriptaculous y un plugin de jQuery.

¡Saludos!

Aurora dice...

He buscado muchas veces pero hay tanto, y sin conocimientos de jquery y scriptoculous es difícil... De tanto probar creo que más de una vez se me ha desajustado algo. En fin, esperaré a tu tutorial.

Karla dice...

Hola Jaime

Execelente Jaime, había visto eso en algunas páginas y nunca me detuve a ver como implementarlo, muy útil ;)

Gracias por compartirlo con todos :D

Jaime Trujillo Escobedo dice...

Todo un placer, Karla. Es verdaderamente útil ya que el factor más importante de un blog es la carga rápida de su contenido.

¡Abrazos!

Jaime Trujillo Escobedo dice...

Aurora, pronto podrás disfrutar de las explicaciones precisas.

Mariangeles dice...

Muchas Gracias Jaime!!
Saludos

Jaime Trujillo Escobedo dice...

¡Gracias a ti Mariangeles! Ahora el blog carga a mayor velocidad.

casinotito dice...

excelente muy util muchas gracias

David villoria dice...

Hola Jaime, muchas gracias por todo. Ya lo he aplicado y efectivamente, carga mucho mejor. Además como pudiste comprobar, mi blog contiene muchas imágenes.
Una vez mas muchísimas gracias.

Jaime Trujillo Escobedo dice...

Incluso diría que hasta es elegante ver como aparecen las imágenes, David.

Ahora solo queda disfrutar sin preocuparse por el número de imágenes a publicar.

¡Abrazos!

chicashot1 dice...

excelente muchas gracias buenísimo mi blog es de puras fotos y no me gusta molestar a los visitantes esto me sirve mucho al igual que todo lo que uso de aquí

Jaime Trujillo Escobedo dice...

Seguro que tus visitantes lo notarán desde el momento en que accedan a tu blog: lo harán aún más rápido.

AdminChess dice...

hola jaime, he intentado utilizar este truco y funciona a la perfeccion, pero al guardarlo se me trastoca, el slider de la pagina principal.

¿sabes a que puede deberse?
http://tiendajedrez.blogspot.com/

saludos

Jaime Trujillo Escobedo dice...

AdminChess, no pude ver el error ya que este truco parece no estar aplicado. La solución podría ser difícil de localizar pero siempre debe intentarse.

Francmi08 dice...

Hola otra vez, perdona por mi insistencia pero podrás ver que cas cada truco que descubro intento aplicarlo.Bueno el problema está en que he puesto este mismo y algunas imagenes no se cargan del todo,la mayoria son iconos de los gadgets de google,uso chrome,¿puede estar relacionado ? acelerarcargadepaginas

^(.)^ Silvia ^(.)^ dice...

Jaime, me gusta, lo tengo puesto en mis 2 blogs y está genial, el efecto de aparición sorpresa de las fotos bajando la página es muy bonito.

Jaime Trujillo Escobedo dice...

Todo lo contrario, Francmi08, encantado de ayudarte. Antes necesitaría saber si alojas los iconos en un servicio externo o utilizas el propio editor de blogger.

Jaime Trujillo Escobedo dice...

Eso es, Silvia, además de acelerar la carga del contenido produce un efecto que atrae la mirada del visitante (lo que da protagonismo a las imágenes).

Por cierto, preciosa la entrada De pronto Alicia se encontró con un gato morado.

^(.)^ Silvia ^(.)^ dice...

Jaime, ¿puede ser que este truco sea incompatible con el de expandir/contraer cosas en los gadgets? En este momento no me funcionan y no sé si es que el truco este de verdad falla al poner lo del acelerador de imágenes, o es el javascript o inclusive la conexión de Internet. ¿Puedes probarlo tú y decirme si te funciona? Es en la sidebar, en las secciones "Valórame si quieres" y "El baúl de los secretos". Si te falla a tí también será debido al acelerador de imágenes ¿no?. Gracias.

Jaime Trujillo Escobedo dice...

Silvia, supongo que no has instalado otro truco a parte del explicado en esta entrada desde que dejó de funcionar.

¿Podrías indicarme la entrada que utilizaste para implementar el enlace 'desplegable'?

Todavía no puedo asegurarte nada pero es probable que sean incompatibles (al menos utilizando esa versión del 'expandir / contraer').

^(.)^ Silvia ^(.)^ dice...

Jaime, creo el truco que apliqué fue este:

Mostrar y ocultar (expandir y contraer ...)

Dime si es incompatible con el acelerador de imágenes y si es así, qué solución hay, porque no quisiera tener que prescindir de uno de ellos; me gustan mucho ambos trucos.

Un saludo y mil gracias.

Jaime Trujillo Escobedo dice...

Silvia, trata de instalar esta otra versión para el truco 'Mostrar y ocultar'.

Avísame en caso de que siga sin funcionar. Gracias a ti.

Freyr Berkana dice...

Gracias por el consejo!! Es muy efectivo!! Si me sirvió!! Y es que la verdad ya me estaba artando de que cargara tan lento!! Muchas GRacias Jaime!!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo