Acelera la carga de las páginas en blogger con Lazy Load de jQuery

  AVISO: 
- Si ya tienes el script de la librería jQuery en tu plantilla, entonces no lo agregues nuevamente. Agregarlo nuevamente podría hacer que otros plugins de jQuery (si lo tuvieses) dejaran de funcionar correctamente.
- Recuerda siempre tener la última versión de jQuery en tu plantilla, para ello visita el catálogo de las librerías de Google API.

Lazy Load de jQuery es un plugin que lo que hace es retrasar la carga de las imágenes de tu blog. Cuando una persona visita tu blog, todos los elementos que componen la plantilla (incluyendo las imágenes) se cargan al mismo tiempo, a pesar de no estarse visualizando. Cuando instalemos este plugin en nuestro blog, todas las imágenes que tengamos se cargarán progresivamente; es decir, sólo se mostrarán cuando el lector las quiera ver a medida que vaya bajando la página. Por consiguiente, esto ayudará a que las páginas de tu blog se carguen mucho más rapido. Yo actualmente estoy usando este script en mi plantilla y pueden ver que mis imágenes se cargan progresivamente a medida que van bajando la página.

Si deseas agregar este script en la plantilla de tu blog, entonces sigue estos pasos:

1) Ingresamos a Blogger > Diseño > Edición de HTML y expandimos artilugios:

Abrir imagen

2) Ahora en la plantilla buscamos esta etiqueta:

</head>

3) Y justo encima de ella (ó antes) agrega el script de Lazy Load:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://bloggeame-blogger.googlecode.com/files/bloggeamelazyload' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function($){
jQuery("img").lazyload({
effect:"fadeIn",
});
});
</script>

4) Finalmente guardas los cambios en la plantilla y eso sería todo.

***Nota***

Lo que está de color verde es el script de la librería jQuery. Si ya lo has usado con otro plugin, entonces no lo vuelvas a agregar.


El término resaltado en rojo, que dice: img representa a todas las imágenes de tu blog. Es decir, este script hará el efecto FadeIn (Lazy Load) a todas las imágenes sin excepción, incluyendo las de tu gadgets en el sidebar.

Si por el contrario deseas emplear este truco sólo a las entradas, entonces reemplaza ese img que está enrojo por .post img

Sería este:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://bloggeame-blogger.googlecode.com/files/bloggeamelazyload' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function($){
jQuery(".post img").lazyload({
effect:"fadeIn",
});
});
</script>

Imprimir artículo