bergabung di grup telegram kami

memasang lazyload image di template median ui

memasang lazyload image di template median ui
memasang lazyload image di template median ui

beberapa waktu lalu saya mendapatkan email reguest tutorial cara memasang lazy load image di template median ui, dan pada kesempatan kali ini saya akan meluangkan waktu untuk membuatkan tutorialnya.

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.

pada blog ini saya juga menggunakan teknik ini karena blog ini bertema tutorial yang di mana rata - rata postingan saya menyesipkan banyak gambar screnshot, tentu dengan adanya lazyload image ini loading blog ini tidak akan terbebani.

buat kalian yang memiliki blog tentang tutorial atau berita atau apapun itu yang mewajibkan kalian harus menyesipkan banyak gambar maka lazyload image ini wajib kalian pasang agar load blog kalian tidak terganggu.

memasang lazyload image di template median ui v1.5

sebelum mulai alangkah baiknya backup template kalian dulu, agar jika terjadi kesalahan bisa kembali ke semula lagi

buat kalian silakan masuk ke blogger dan pilih tema dan edit html , silakan scrol paling bawah dan temukan javascript yang seperti ini

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

jika sudah ketemu silakan di hapus dan ganti dengan javascript di bawah ini

var lazyblog=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyblog||0!=document.body.scrollTop&&!1===lazyblog)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/[email protected]/lazysize.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyblog=!0)},!0);

jika ingin mengaktfikan lazyload pada halaman postingan / artikel bisa tambahkan javascript di bawah ini yang saya dapatkan dari blog idnxmus.

<b:if cond='data:view.isPost'><script>/*<![CDATA[*/ var lzy = document.getElementById('postBody'); 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>

jika sudah silakan simpan dan lihat hasilnya, untuk yang menggunakan template lain harus ubah tag image yang ada di template kalian, setiap template memiliki kode yang berbeda namun kalian bisa mancari kode yang kurang lebih seperti ini, terdapat beberapa silakan ubah semuanya


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

sehingga hasilnya akan tampak seperti ini

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

ok jadi sekian cara memasang lazyload image di template median ui semoga bermanfaat.

Source code:
https://blog.jagodesain.com
www.idnxmus.com

Baca juga :

25 komentar



image quote pre code
  1. kode JavaScript nya taruh di sebelah mana ya, mas?
    <b:if cond='data:view.isPost'><script>/*<![CDATA[*/ var lzy = document.getElementById('postBody'); 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>
    1. Di atas penutup body mas
    2. sudah jadi mas. Oiya, untuk TOC yg berkedip di Median v1.5 gmna ya? pakai kode yg dikasih Mas Wendy yg di v1.4 ga work
    3. itu karna classname berbeda dengan versi sebelumnya, versi baru nama class nya .tableOfIcon:before
  2. mas, css untuk gambarnya biar nggak langsung muncul gitu pas di scroll apa ya
    1. Ini maksudnya gimana ya?
    2. maksudnya mau nambahin animasi keyframe pas gambarnya muncul
    3. img.lazyloaded{animation:lazyfex 1s ease-out;}
      @keyframes lazyfex{0%{opacity:0}100%{opacity:1}}
  3. mas wendy, cara Mengembalikan icon navigasi pas di postingan di median ui versi 1.5 gimana yak, bingung pas nyari class2nya, boleh dong pencerahannya heheh
    1. Mengembalikan Icon navigasi yang ada di postingan , tidak paham saya maksudnya gimana mas
  4. seperti ini mas kurang lebih
    https://ibb.co/KyC5wCj
  5. https://i.ibb.co/ZTyfmy6/20210527-113543.png
    1. css ini
      .onItem .headerIcon label.navMenu, .onItem #header-widget{display:none}
      .onItem .headerIcon a.navMenu{display:flex; margin-left:0;left:-5px}


      ubah jadi
      .onItem .headerIcon label.navMenu, .onItem #header-widget{display:block}
      .onItem .headerIcon a.navMenu{display:none}

    2. makasih ya mas wendy, solved.
  6. Masnya kenapa nggak pake lazyload di postingan?
    1. gambar yang saya pakai ukurannya kecil mas dari 20an hingga 50kb saja paling besar karna saya selalu kompres dulu sebelum upload. Jadi tidak terlalu mempengaruhi loading blog.
  7. Mas wendy, heheh mianhe.

    Jadi kalau di postingan gambar awalnya gak ada kan ya kayak space kosong gitu, dan harus discroll dulukan biar gambarnya muncul.

    Nahh cara agar si gambar nggak kosong gitu cssnya gmn mas, kyk semacam kotak gitu tapi agak blur2 gitu, itu namanya apa ya mas.

    Wkwkwk semoga faham apa yang saya jelaskan :v dan semoga ada solusinya dari mas wendy mwhwhwhw :v
    1. tambahkan css ini mas
      .postEntry img.lazy{box-shadow:0 2px 12px -2px rgb(0 0 0 / 12%);width:100%;max-height:500px;max-width:500px}
  8. Cara membuat foto bisa blur kaya idnxemus gmna mas mohon tutorialnya
  9. Bisakah solusi ini berfungsi untuk UI Median versi 1.6?
    1. Median ui 1.6 sudah terdapat script lazyload, anda tidak perlu menggunakan ini lagi
  10. jika ingin mengubah (no image )menjadi gambar sesuai keinginan gimana mas
    1. untuk median 1.6 silakan di sesuaikan lagi
      .pThmb .thmb{
      background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhK2XjyEo_QS8V69VLrLoPhGqBdSuUhdX9adWqyJ-lhVe4_rMXvXuIMGgJye4XljPA74A5KUNVyD4rl7q6gonwEhbe9kJjXbrIU2_f_rFJ8ZsjcGk5ZUkcwce3Nl4Jc_1Pi_RJieSHRkzpwuspl7AoQ4pcH1GmD-Ghjvw36mmpqGRLW-qXd3EiMTGdFEw);background-repeat: no-repeat;background-position:50% 50%;background-size:133% 112%;
      }
      .pThmb div.thmb span::before{
      display:none;
      }
  11. Please update to version 1.6
    1. median ui 1.6 already uses lazyload, didn't you notice?
© 2020 - Wendy Code