Las imágenes son los recursos más pesado de un blog, y a pesar de que estén optimizada, igualmente tiene una carga significativa. La mejor alternativa a este pequeño problema es usar un pequeño script que retrase las imágenes y que solo se muestre solo si son vistas por el usuario.
En esta ocasión les quiero compartir un pequeño script que utilizo en mi blog.
Foto de Nubia Navarro (nubikini): https://www.pexels.com/es-es/foto/mujer-y-hombre-equitacion-en-bicicleta-386024/
Sobre Yall.js
Yall.js es un pequeño script escrito en Vanillajs que a diferencia de los demás, que están sujeto de otro framework como Jquery, este script es increíblemente ligero.
Instalacion
Para instalar este complemento debemos ir a panel de admistracion / Tema / Edicion html / Buscar la etiqueta b:skin y debajo de ella, pegar el siguiente codigo
/*! lazy.min.css */
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.lazy-change{-webkit-animation:fadeIn 1s;animation:fadeIn 1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.lazy-loaded{-webkit-animation-play-state:running;animation-play-state:running}.lazy{display:none;}.image img{display:block}Despues de haber guardado los cambios, ahora buscamos la etiqueta </body> y justo arriba de la etiqueta pega el siguiente codigo.
<script><![CDATA[//
var yall = function(){
"use strict";
return function(e){var n=(e=e||{}).lazyClass||"lazy",t=e.lazyBackgroundClass||"lazy-bg",o="idleLoadTimeout"in e?e.idleLoadTimeout:200,i=e.observeChanges||!1,r=e.events||{},a=window,s="requestIdleCallback",u="IntersectionObserver",c=["srcset","src","poster"],d=[],l=function(e,o){return d.slice.call((o||document).querySelectorAll(e||"img."+n+",video."+n+",iframe."+n+",."+t))},f=function(n){var o,i=n.parentNode;"PICTURE"==i.nodeName&&(o=i),"VIDEO"==n.nodeName&&(o=n),g(l("source",o),b),b(n),n.autoplay&&n.load();var r=n.classList;r.contains(t)&&(r.remove(t),r.add(e.lazyBackgroundLoaded||"lazy-bg-loaded"))},v=function(e){for(var n in r)e.addEventListener(n,r[n].listener||r[n],r[n].options||void 0)},b=function(e){var n=function(n){c[n]in e.dataset&&a.requestAnimationFrame((function(){e.setAttribute(c[n],e.dataset[c[n]])}))};for(var t in c)n(t)},g=function(e,n){for(var t=0;t<e.length;t++)n instanceof a[u]?n.observe(e[t]):n(e[t])},m=function(e){if(e.isIntersecting||e.intersectionRatio){var t=e.target;s in a&&o?a[s]((function(){f(t)}),{timeout:o}):f(t),t.classList.remove(n),p.unobserve(t),(h=h.filter((function(e){return e!=t}))).length||i||p.disconnect()}},y=function(e){h.indexOf(e)<0&&(h.push(e),v(e),p.observe(e))},h=l();if(/baidu|(?:google|bing|yandex|duckduck)bot/i.test(navigator.userAgent))g(h,f);else if(u in a&&u+"Entry"in a){var p=new a[u]((function(e){g(e,m)}),{rootMargin:("threshold"in e?e.threshold:200)+"px 0%"});g(h,v),g(h,p),i&&g(l(e.observeRootSelector||"body"),(function(n){new MutationObserver((function(){g(l(),y)})).observe(n,e.mutationObserverOptions||{childList:!0,subtree:!0})}))}}}();
//]]></script><script><![CDATA[//
document.addEventListener("DOMContentLoaded",function(){yall({threshold:50,observeChanges:!0,events:{load:function(a){a.target.classList.contains("lazy")||"IMG"!=a.target.nodeName||a.target.classList.add("lazy-loaded")}}})});
//]]></script>Uso
Quizas sea la parte mas complicada, debes buscar la imagenes que desea agregar este efecto, por ejemplo las imagenes de la pagina principal, y agregar el siguiente atributo:
<div class="image"><img expr:data-src="data:post.featuredImage" class="lazy-change lazy" alt="imagen de ejemplo" /></div>Creditos
Este script fue hecho por malchata, visita su perfil de github
Conclusión
Aunque en este artículo se enfoca en Blogger, este script es totalmente funciona en cualquier servicio que acepte javascript. En fin, epero que este aporte te haya sido útil.
No olvides comentar sobre cualquier duda que tenga, si te gusto el artículos compártelos con tus amigos. Hasta la próxima.