lazyload image dengan efek animasi loading

Hallo semua pada kesempatan kali ini saya akan membagikan cara memasang lazyload image dengan efek animasi seperti loading.

dan pada postingan sebelumnya juga saya sudah pernah membagikan memasang lazyload image di template median ui namun tidak ada efek animasinya, jadi buat kalian yang ingin ada efek anmiasinya bisa pakai cara ini.

tutorial ini di reguest oleh @Darma yang berkomentar melalui forum blog ini, buat kalian yang ingin reguest tutorial bisa berkomentar di forum atau mengirim pesan via email melalui halaman kontak. jika memungkinkan akan kami buatkan di masa mendatang.

Apa itu Lazy Load Image

lazy load image adalah sebuah teknik untuk membuat pemuatan gambar di website menjadi tidak sinkron, Dengan artian setelah konten bagian atas sepenuhnya dimuat, Maka gambar tidak akan dimuat.

hal tersebut bisa dikatakan jika pengguna tidak melakukan scroll sepenuhnya, Maka gambar yang ditempatkan di bagian bawah halaman tidak akan dimuat. jadi, Browser tidak akan memuat gambar jika pengguna tidak melakukan scroll ke gambar.

lazy load bekerja dengan memuat gambar hanya jika pengguna telah menggulir ke lokasi di mana gambar akan terlihat di dalam viewport, jika tidak, maka gambar-gambar itu tidak akan pernah dimuat.

Cara Memasang LazyLoad Image Dengan Efek Animasi Loading

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

.wendyThumb{background:#f09800;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%}}

lanjut letakkan javascript di bawah ini di atas kode </body> jika tidak menemukannya kemungkinan telah di parse shingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
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;
    //]]>
</script>

jika ingin mengaktfikan lazyload pada halaman postingan / artikel bisa tambahkan javascript di bawah ini. kalian bisa meletakkanya di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'><script>/*<![CDATA[*/ var lzy = document.getElementById('post-body'); var imagesl = lzy.getElementsByTagName('img'); for(var i = 0; i < imagesl.length; i++) {var currentSrc = imagesl[i].getAttribute('src'); imagesl[i].setAttribute('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAPSURBVCiRY2AYBaOACgAAAkkAAeA86/QAAAAASUVORK5CYII='); imagesl[i].setAttribute('loading','lazy'); imagesl[i].setAttribute('data-src',currentSrc); imagesl[i].className += ' lazy';};/*]]>*/</script></b:if>

lanjut cari kode serupa / mirip di bawah ini, setiap template mungkin memiliki kode yang berbeda. dan ada beberapa kode serupa ubahlah semuanya sesuai petunjuk di bawah ini.

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

sudah ketemu ?
- tambahkan tag class="lazy" pada tag imagenya
- ubah expr:src menjadi expr:data-src
- tambahkan src dan value nya di isi dengan data:image /png;base64 ,R0lGODlhAQABAAD /ACwAAAAAAQ ABAAACADs=
- dan tambahkan tag html ini <div class='wendyPreloader'><div class='wendyspinner'><span class='wendyloader'><span class='wendy-load-inner'/></span></div></div><span class='wendyThumb'/> sebelum tag <img
sehingga hasilnya akan tampak seperti di bawah ini

<div class='wendyPreloader'><div class='wendyspinner'><span class='wendyloader'><span class='wendy-load-inner'/></span></div></div><span class='wendyThumb'/><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

sampai di sini sebenarnya sudah selesai, kalian bisa klik simpan. namun pasti di antara kalian nanti akan menemukan beberapa masalah seperti gambar uda muncul tapi spinner atau animasi loadingnya tidak hilang - hilang.

sebenarnya animasi loading itu tidak lah benar - benar hilang, hanya tertimpa oleh gambar thumbnail kita aja, jadi buat yang animasi loadingnya masi terlihat saat gambar sudah muncul, itu di karenakan posisi gambar thumbnail kalian berada di posisi bawah anmiasi loading tersebut, harusnya kan berada di atas.

cara buat thumbnail nya jadi ke atas kalian hanya perlu tambhkan kode z-index:3 pada css class thumbnail kalian, setiap template memiliki class atau kode yang berbeda namun kalian bisa mencari class atau kode serupa ini.post-thumb{...}

Khusus Pengguna Template Median Ui V 1.4

untuk kalian yang kurang paham soal coding, dan menggunakan template median ui v.1.4 abaikan cara di atas dan ikuti saja cara di bawah ini, agar kalian tidak susah - susah edit nya nanti.

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></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%}}

cari juga css seperti di bawah ini, jika sudah ketemu tambahkan kode ini ;z-index:2

.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%)}

.Profile .solo .profile-g:after{content:'+';display:flex;align-items:center;justify-content:center;width:18px;height:18px;background-color:#fefefe;color:$(link.bg.colors);border-radius:50%;position:absolute;right:0;bottom:-2px;box-shadow:0 4px 10px 0 rgba(30,30,30,.08);-webkit-transition:all .1s ease;transition:all .1s ease}

lanjut silakan scrol paling bawah dan temukan javascript yang seperti ini

<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>

hapus yang bagian saya tandai pada kode di atas dan ganti dengan kode di bawah ini.

    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;

jika ingin mengaktfikan lazyload pada halaman postingan / artikel bisa tambahkan javascript di bawah ini. kalian bisa meletakkanya di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'><script>/*<![CDATA[*/ var lzy = document.getElementById('post-body'); var imagesl = lzy.getElementsByTagName('img'); for(var i = 0; i < imagesl.length; i++) {var currentSrc = imagesl[i].getAttribute('src'); imagesl[i].setAttribute('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAPSURBVCiRY2AYBaOACgAAAkkAAeA86/QAAAAASUVORK5CYII='); imagesl[i].setAttribute('loading','lazy'); imagesl[i].setAttribute('data-src',currentSrc); imagesl[i].className += ' lazy';};/*]]>*/</script></b:if>

lanjut cari kode seperti di bawah ini ada 3

<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='/>

lalu tambahkan kode di bawah ini sebelum tag <img class='post-thumb lazy'

<div class='wendyPreloader'><div class='wendyspinner'><span class='wendyloader'><span class='wendy-load-inner'/></span></div></div><span class='wendyThumb'/>

jika sudah silakan klik simpan dan lihat hasilnya, ok sekian cara memasang lazyload image dengan efek animasi seperti loading semoga bermanfaat.