grup whatsapp indonesian members only
Join Now

lazyload image dengan efek animasi loading

cara memasang lazyload image dengan efek animasi seperti loading, lazy load image adalah sebuah teknik untuk membuat pemuatan gambar di website
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.

lazyload image dengan efek animasi loading
reguest oleh @Darma

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.

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

22 komentar

  1. Terimakasih mas sudah dibuatin tutorialnya
    1. sama2 ya mas
  2. Gan cara nambahin efek hover img pas di klik gimana ya, di template ku soalnya gak ada.
    1. Mau efek kaya gimana dulu, kan banyak efek yang bisa di pakai, misalnya aja pas di hover gambar di zoom atau jadi terang dan masi bnyk lagi
    2. sudah ketemu gan ternyata tutorialnya ada di blog ini, thanks gan.
    3. Perasaan saya tidak ada buat tutorial efek hover pada gambar , mungkin maksudnya adalah lightbox gambar, gambar di klik jadi full scren gitu
    4. iya gan, saya gak tau namanya apa, yg saya tau cuman hover² gitu, ternyata namanya lightbox img.
  3. saya sudah coba cara ini di Template Median Ui yg terbaru, tp kok efek animasinya pas di scroll ga ilang ya?
    1. Pada css .widget .post-thumb jangan lupa kasi z-index:3 ya
    2. kodenya yg seperti apa ya gan? kebetulan saya jg pengguna median ui, saya gatau kodenya gan
    3. Ada kok di tutorialnya mas, mungkin kelewat stepnya, karna sudah saya buatkan juga khusus pengguna template median ui jadi jika di ikuti dengan benar bakal sesuai
  4. https://1.bp.blogspot.com/-d1R4JeeZprU/YILeQ233DkI/AAAAAAAAWaY/LK_jb8opYRE9HbbgXqt5IPa7jE8W-oFzQCLcBGAsYHQ/s0/20210423_214427_1.gif

    kalo ditambahkan kode ;z-index:3 jd kaya gini gan, punya agan kok normal2 aja ya
    1. https://1.bp.blogspot.com/-d1R4JeeZprU/YILeQ233DkI/AAAAAAAAWaY/LK_jb8opYRE9HbbgXqt5IPa7jE8W-oFzQCLcBGAsYHQ/s0/20210423_214427_1.gif
    2. Sebenarnya saya juga baru menyadarinya. Artikel lupa saya update, ubah jadi z-index:2 jangan 3.

      Trrus cari css seperti di bawah ini, kasi juga z-index:2

      .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}
    3. sudah jadi gan.
      Biar gambar yg di postingan/artikel ikut kena efek Lazyload jg caranya gmna ya?
    4. letakkan di atas /body

      <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.replace(/.*?:\/\//g , "https://cdn.statically.io/img/")); imagesl[i].className += ' lazy';};/*]]>*/</script>
    5. Makasih mas, sudah bisa. Jangan kapok2 ya ngajarin saya XD
    6. Santai aja mas, selama yang di tanyakan masi berkaitan dengan postingan saya pasti di jawab
  5. Please Add English Translation to the blog
    1. On the translation widget, select (Inggris) to translate to English
  6. When coming for median ui 1.5 ?
    1. median ui version 1.5 check out this post
      https://blog.choipanwendy.com/2020/12/memasang-lazyload-image-di-template-median-ui.html


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english