How to Install Lazyload Images with Animation Effects in Median UI 1.4

How to Install Lazyload Images with Animation Effects in Median UI 1.4
How to Install Lazyload Images
Hello, guys welcome to infinity blogger today we are going to learn that how to create a lazy load on median UI 1.4. If you want lazy load for other blogger templates and statues tune I will upload lazy load for other blogger templates soon.

What is a lazy load Image?

lazyload image is a technique to make the image load on the website asynchronous, meaning that once the top content is fully loaded, the image will not load.

it can be said that if the user does not scroll completely, then the image that is placed at the bottom of the page will not load. So, the browser will not load the image if the user does not scroll through the image.

lazyload works by loading images only if the user has scrolled to the location where the images will be visible in the viewport, otherwise, they will never load.

How to Install LazyLoad Image With Loading Animation Effects in Median UI 1.4?

Installing lazy load image in medium UI 1.4 blogger template is very simple and easy you just have to follow the process given below, to successfully install lazy load image in your blogger template.

Steps:

Go to Blogger.com
Then Go to Theme
Click On Edit HTML
Then Find  ]]></b:skin> 
And Paste This Give Below CSS Above  ]]></b:skin> 
.wendyThumb{background:$(icon.link.colors);position:absolute;top:1%;bottom:1%;left:0;right:0;border-radius:10px}
.wendyPreloader{overflow:hidden;left:0;right:0;top:0;bottom:10%;margin:auto;position:absolute;z-index:1;text-align:center}
.wendyspinner{list-style:none;padding:0;left:0;right:0;top:0;bottom:0;margin:auto;position:absolute}
.wendyloader{display:inline-block;width:20px;height:20px;border-radius:5px;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.85);top:50%;animation:wendyloader 2s infinite ease}
.wendy-load-inner{vertical-align:top;display:inline-block;width:100%;background-color:rgba(255,255,255,.85);animation:wendy-load-inner 2s infinite ease-in}
@keyframes wendyloader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}@keyframes wendy-load-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}
After That Find This Give Below CSS and Add this Code  ;z-index:3  at the end.
Example: transform:translate(-50%, -50%);z-index:3}
.widget .post-thumb{display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
Find This Given Below Javascript

<script>/*<![CDATA[*/ function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#mainContent").classList.add("dark-mode"):document.querySelector("#mainContent").classList.remove("dark-mode")}; function listMode(){localStorage.setItem("list","listmode"===localStorage.getItem("list")?"grid":"listmode"),"listmode"===localStorage.getItem("list")?document.querySelector("#Blog00").classList.add("list-mode"):document.querySelector("#Blog00").classList.remove("list-mode")};
defer(function() { window.lazySizesConfig=window.lazySizesConfig||{},lazySizesConfig.loadMode=1,lazySizesConfig.preloadAfterLoad=!1,function(e){var t=function(c,D,d){"use strict";var k,H;if(function(){var e,t={lazyClass:"lazy",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};H=c.lazySizesConfig||c.lazysizesConfig||{};for(e in t)e in H||(H[e]=t[e])}(),!D||!D.getElementsByClassName)return{init:function(){},cfg:H,noSupport:!0};var O=D.documentElement,i=c.HTMLPictureElement,P="addEventListener",$="getAttribute",q=c[P].bind(c),I=c.setTimeout,U=c.requestAnimationFrame||I,s=c.requestIdleCallback,j=/^picture$/i,a=["load","error","lazyincluded","_lazyloaded"],n={},G=Array.prototype.forEach,J=function(e,t){return n[t]||(n[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")),n[t].test(e[$]("class")||"")&&n[t]},K=function(e,t){J(e,t)||e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)},Q=function(e,t){var n;(n=J(e,t))&&e.setAttribute("class",(e[$]("class")||"").replace(n," "))},V=function(t,n,e){var i=e?P:"removeEventListener";e&&V(t,n),a.forEach(function(e){t[i](e,n)})},X=function(e,t,n,i,a){var o=D.createEvent("Event");return n||(n={}),n.instance=k,o.initEvent(t,!i,!a),o.detail=n,e.dispatchEvent(o),o},Y=function(e,t){var n;!i&&(n=c.picturefill||H.pf)?(t&&t.src&&!e[$]("srcset")&&e.setAttribute("srcset",t.src),n({reevaluate:!0,elements:[e]})):t&&t.src&&(e.src=t.src)},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},r=function(e,t,n){for(n=n||e.offsetWidth;n<H.minSize&&t&&!e._lazysizesWidth;)n=t.offsetWidth,t=t.parentNode;return n},ee=function(){var n,i,t=[],a=[],o=t,r=function(){var e=o;for(o=t.length?a:t,n=!0,i=!1;e.length;)e.shift()();n=!1},e=function(e,t){n&&!t?e.apply(this,arguments):(o.push(e),i||(i=!0,(D.hidden?I:U)(r)))};return e._lsFlush=r,e}(),te=function(n,e){return e?function(){ee(n)}:function(){var e=this,t=arguments;ee(function(){n.apply(e,t)})}},ne=function(e){var n,i=0,a=H.throttleDelay,o=H.ricTimeout,t=function(){n=!1,i=d.now(),e()},r=s&&o>49?function(){s(t,{timeout:o}),o!==H.ricTimeout&&(o=H.ricTimeout)}:te(function(){I(t)},!0);return function(e){var t;(e=!0===e)&&(o=33),n||(n=!0,t=a-(d.now()-i),t<0&&(t=0),e||t<9?r():I(r,t))}},ie=function(e){var t,n,i=99,a=function(){t=null,e()},o=function(){var e=d.now()-n;e<i?I(o,i-e):(s||a)(a)};return function(){n=d.now(),t||(t=I(o,i))}},e=function(){var z,m,u,y,e,h,v,g,p,C,b,A,o=/^img$/i,f=/^iframe$/i,E="onscroll"in c&&!/(gle|ing)bot/.test(navigator.userAgent),_=0,w=0,M=0,N=-1,S=function(e){M--,(!e||M<0||!e.target)&&(M=0)},x=function(e){return null==A&&(A="hidden"==Z(D.body,"visibility")),A||!("hidden"==Z(e.parentNode,"visibility")&&"hidden"==Z(e,"visibility"))},W=function(e,t){var n,i=e,a=x(e);for(g-=t,b+=t,p-=t,C+=t;a&&(i=i.offsetParent)&&i!=D.body&&i!=O;)(a=(Z(i,"opacity")||1)>0)&&"visible"!=Z(i,"overflow")&&(n=i.getBoundingClientRect(),a=C>n.left&&p<n.right&&b>n.top-1&&g<n.bottom+1);return a},t=function(){var e,t,n,i,a,o,r,s,l,c,d,u,f=k.elements;if((y=H.loadMode)&&M<8&&(e=f.length)){for(t=0,N++;t<e;t++)if(f[t]&&!f[t]._lazyRace)if(!E||k.prematureUnveil&&k.prematureUnveil(f[t]))R(f[t]);else if((s=f[t][$]("data-expand"))&&(o=1*s)||(o=w),c||(c=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand,k._defEx=c,d=c*H.expFactor,u=H.hFac,A=null,w<d&&M<1&&N>2&&y>2&&!D.hidden?(w=d,N=0):w=y>1&&N>1&&M<6?c:_),l!==o&&(h=innerWidth+o*u,v=innerHeight+o,r=-1*o,l=o),n=f[t].getBoundingClientRect(),(b=n.bottom)>=r&&(g=n.top)<=v&&(C=n.right)>=r*u&&(p=n.left)<=h&&(b||C||p||g)&&(H.loadHidden||x(f[t]))&&(m&&M<3&&!s&&(y<3||N<4)||W(f[t],o))){if(R(f[t]),a=!0,M>9)break}else!a&&m&&!i&&M<4&&N<4&&y>2&&(z[0]||H.preloadAfterLoad)&&(z[0]||!s&&(b||C||p||g||"auto"!=f[t][$](H.sizesAttr)))&&(i=z[0]||f[t]);i&&!a&&R(i)}},n=ne(t),L=function(e){var t=e.target;if(t._lazyCache)return void delete t._lazyCache;S(e),K(t,H.loadedClass),Q(t,H.loadingClass),V(t,B),X(t,"lazyloaded")},i=te(L),B=function(e){i({target:e.target})},T=function(t,n){try{t.contentWindow.location.replace(n)}catch(e){t.src=n}},F=function(e){var t,n=e[$](H.srcsetAttr);(t=H.customMedia[e[$]("data-media")||e[$]("media")])&&e.setAttribute("media",t),n&&e.setAttribute("srcset",n)},r=te(function(t,e,n,i,a){var o,r,s,l,c,d;(c=X(t,"lazybeforeunveil",e)).defaultPrevented||(i&&(n?K(t,H.autosizesClass):t.setAttribute("sizes",i)),r=t[$](H.srcsetAttr),o=t[$](H.srcAttr),a&&(s=t.parentNode,l=s&&j.test(s.nodeName||"")),d=e.firesLoad||"src"in t&&(r||o||l),c={target:t},K(t,H.loadingClass),d&&(clearTimeout(u),u=I(S,2500),V(t,B,!0)),l&&G.call(s.getElementsByTagName("source"),F),r?t.setAttribute("srcset",r):o&&!l&&(f.test(t.nodeName)?T(t,o):t.src=o),a&&(r||l)&&Y(t,{src:o})),t._lazyRace&&delete t._lazyRace,Q(t,H.lazyClass),ee(function(){var e=t.complete&&t.naturalWidth>1;d&&!e||(e&&K(t,"ls-is-cached"),L(c),t._lazyCache=!0,I(function(){"_lazyCache"in t&&delete t._lazyCache},9)),"lazy"==t.loading&&M--},!0)}),R=function(e){if(!e._lazyRace){var t,n=o.test(e.nodeName),i=n&&(e[$](H.sizesAttr)||e[$]("sizes")),a="auto"==i;(!a&&m||!n||!e[$]("src")&&!e.srcset||e.complete||J(e,H.errorClass)||!J(e,H.lazyClass))&&(t=X(e,"lazyunveilread").detail,a&&ae.updateElem(e,!0,e.offsetWidth),e._lazyRace=!0,M++,r(e,t,a,i,n))}},a=ie(function(){H.loadMode=3,n()}),s=function(){3==H.loadMode&&(H.loadMode=2),a()},l=function(){if(!m){if(d.now()-e<999)return void I(l,999);m=!0,H.loadMode=3,n(),q("scroll",s,!0)}};return{_:function(){e=d.now(),k.elements=D.getElementsByClassName(H.lazyClass),z=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass),q("scroll",n,!0),q("resize",n,!0),q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);t.length&&t.forEach&&U(function(){t.forEach(function(e){e.complete&&R(e)})})}}),c.MutationObserver?new MutationObserver(n).observe(O,{childList:!0,subtree:!0,attributes:!0}):(O[P]("DOMNodeInserted",n,!0),O[P]("DOMAttrModified",n,!0),setInterval(n,999)),q("hashchange",n,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,n,!0)}),/d$|^c/.test(D.readyState)?l():(q("load",l),D[P]("DOMContentLoaded",n),I(l,2e4)),k.elements.length?(t(),ee._lsFlush()):n()},checkElems:n,unveil:R,_aLSL:s}}(),ae=function(){var n,o=te(function(e,t,n,i){var a,o,r;if(e._lazysizesWidth=i,i+="px",e.setAttribute("sizes",i),j.test(t.nodeName||""))for(a=t.getElementsByTagName("source"),o=0,r=a.length;o<r;o++)a[o].setAttribute("sizes",i);n.detail.dataAttr||Y(e,n.detail)}),i=function(e,t,n){var i,a=e.parentNode;a&&(n=r(e,a,n),i=X(e,"lazybeforesizes",{width:n,dataAttr:!!t}),i.defaultPrevented||(n=i.detail.width)&&n!==e._lazysizesWidth&&o(e,a,i,n))},e=function(){var e,t=n.length;if(t)for(e=0;e<t;e++)i(n[e])},t=ie(e);return{_:function(){n=D.getElementsByClassName(H.autosizesClass),q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){!t.i&&D.getElementsByClassName&&(t.i=!0,ae._(),e._())};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:ae,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:r,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});  });

( function() {var youtube = document.querySelectorAll(".lazy-youtube"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.setAttribute("alt","Youtube video"); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); youtube[i].addEventListener( "click", function() {var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); }); }; })();
function changeFont(){var x=document.getElementById('post-font');if(x.classList)x.classList.toggle('active');else{var z=x.className.split(' ');0<=(t=z.indexOf('active'))?z.splice(t,1):z.push('active'),x.className=z.join(' ')}};
function copyFunction(){document.getElementById("getlink").select(),document.execCommand("copy"),document.getElementById("share-notif").innerHTML="<span>Link copied!</span>" }; var uri = window.location.toString();if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri);}
/*]]>*/
</script>
After Finding, Delete the Part I Marked in the Code Above and Replace it With the Code Below.

function LazyOnScroll() {setTimeout(function() {function lazyLoad() {for (var e = document.getElementsByClassName("lazy"), t = 0; t < e.length; t++) isInViewport(e[t]) && (e[t].src = e[t].getAttribute("data-src"));} function isInViewport(e) {var t = e.getBoundingClientRect(); return t.top <= (window.innerHeight || document.documentElement.clientHeight) && t.bottom >= 0 && t.left <= (window.innerWidth || document.documentElement.clientWidth) && t.right >= 0} function registerListener(e, t) {window.addEventListener ? window.addEventListener(e, t) : window.attachEvent("on" + e, t)} registerListener("load", lazyLoad), registerListener("scroll", lazyLoad), document.addEventListener("DOMContentLoaded", function () {"use strict"; for (var e = document.querySelectorAll("a"), t = e.length, n = /firefox|trident/i.test(navigator.userAgent) ? document.documentElement : document.body, i = function (e, t, n, i) {return (e /= i / 2) < 1 ? n / 2 * e * e * e + t : n / 2 * ((e -= 2) * e * e + 2) + t}; t--;) e.item(t).addEventListener("click", function (e) {var t, o = n.scrollTop, r = document.getElementById(/[^#]+$/.exec(this.href)[0]).getBoundingClientRect().top, d = n.scrollHeight - window.innerHeight, a = d > o + r ? r : d - o, c = 900, s = function (e) {t = t || e; var r = e - t, d = i(r, o, a, c); n.scrollTop = d, c > r && requestAnimationFrame(s)}; requestAnimationFrame(s), e.preventDefault() }) }); },1000) } window.addEventListener ? window.addEventListener("load", LazyOnScroll, !1) : window.attachEvent ? window.attachEvent("onload", LazyOnScroll) : window.onload = LazyOnScroll;
At The End Find This Three HTML Code Given Below
<img class="post-thumb lazy" expr:alt="data:post.title" expr:data-src="resizeImage(data:post.featuredImage, 400, &quot;18:9&quot;)" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img class="post-thumb lazy" expr:alt="data:post.title" expr:data-src="resizeImage(data:post.featuredImage, 400, &quot;26:9&quot;)" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
<img class="post-thumb lazy" expr:alt="data:post.title" expr:data-src="resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;)" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
Then Add The Code Given Below Before the <img class = 'post-thumb lazy' Tag.

 
<div class='wendyPreloader'><div class='wendyspinner'><span class='wendyloader'><span class='wendy-load-inner'/></span></div></div><span class='wendyThumb'/>
Now Click On Save Button And See The Result...

I hope now you understand how to install lazyload images with animation effects, If you are facing any problem Then mention your problem in the comment section.

Source: https://blog.choipanwendy.com/