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
![Diseño - Edición de HTML - expandimos artilugios](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlJN4bypvrm4KcVKV3zB4b0MAj2oR2tyC2C-OVC2zD_ZlX31229Sp5MwSQCfFbUcneUvNgevffdd9W7wlbU_F4rKLSPw5xktmwbmuE5ehXrcYd961vJZuiSyWDlE8bvXE4dMzCi4d_VA/s1600-r/blogger.png)
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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUraaN83nNwu3jPJoMzV2MZ6R5B8xkmc363xfQsypl6D17CVak21J1gmrb4sO50a1ymaJvGOe-Ojn7kFcQ5wcoA4dZ8HqHlZJjLPqOzAuFk3lP_bVZx-ncZtjtB3C3enSH6Q9ip0oLqVlR/s320/blcnopas.png)
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.
No hay comentarios:
Publicar un comentario