Ads

Update: Lazy Load Gambar untuk Blog

Tutor kali ini saya akan membagikan "Cara Membuat Lazy Load untuk Blog". Dan sebelum melanjutkan mari kita bahas apa itu Lazy load.

Lazy Load berfungsi untuk menunda gambar untuk tampil saat halaman sedang loading. Jadi gambar akan muncul saat halaman tersebut sudah selesai Loading.

Lazy Load Gambar untuk Blog

Lazy Load Gambar untuk Blog
Dagruel

Pertama cari tag <img> di dalam template kalian, tampilan nya kurang lebih seperti ini.

<img alt='Title Image' src='Url Gambar' title='Title Image'/>

Jika sudah tambahkan class='lazy' ganti src dengan data-src kemudian tambahkan ini src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' setelah data-src=''.

Kurang lebih tampilan nya seperti ini.

<img class='lazy' alt='titleImage'  data-src='urlImage'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' title='titleImage'/>
Catatan untuk Blogger tambahkan expr: di awal attribute contoh seperti di bawah.
<img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' expr:alt='data:post.title' expr:data-src='data:post.featuredImage'/>

Ubah lah setiap tag <img> yang ingin gambar nya di terapkan dengan lazy load seperti di atas.

Dan inilah bagian penting nya script nya. Tempelkan di atas tag </head>

<script type='text/javascript'>
/*<![CDATA[*/
const eIV=e=>{let t,o,n,a;for(t=e.offsetTop,o=e.offsetLeft,n=e.offsetWidth,a=e.offsetHeight;e.offsetParent;)t+=(e=e.offsetParent).offsetTop,o+=e.offsetLeft;return t>=window.pageYOffset&&o>=window.pageXOffset&&t+a<=window.pageYOffset+window.innerHeight&&o+n<=window.pageXOffset+window.innerWidth},lazyLoad={rc:void 0,mc:()=>{lazyLoad.rc&&clearTimeout(lazyLoad.rc),lazyLoad.rc=setTimeout(()=>{let e=window.pageYOffset;document.querySelectorAll("img.lazy").forEach(t=>{t.offsetTop<window.innerHeight+e&&eIV(t)&&(t.src=t.dataset.src,t.classList.remove("lazy"))}),0==document.querySelectorAll("img.lazy").length&&(document.removeEventListener("scroll",lazyLoad.mc),window.removeEventListener("resize",lazyLoad.mc),window.removeEventListener("orientationChange",lazyLoad.mc))},20)}};document.addEventListener("DOMContentLoaded",lazyLoad.mc),document.addEventListener("scroll",lazyLoad.mc),window.addEventListener("resize",lazyLoad.mc),window.addEventListener("orientationChange",lazyLoad.mc);
/*]]>*/
</script>

Setelah di terapkan coba cek blog kalian apakah berhasil? Jika iya maka selamat. Demo nya seperti blog saya.

Dan yang belum berhasil silahkan coret-coret di kolom komentar akan saya bantu. Sekian dari saya Terima Kasih.

10 komentar

Blogger Disqus
  1. untuk lazy loadnya ada demonya gak min...

    BalasHapus
  2. Min buat tutorial bikin Filter Search

    BalasHapus
  3. min, di template seleseven v2 saya ga seperti ini, kalo mau ubah biar seperti ini bagaimana caranya min? soalnya udah ngikutin tutorialnya ga work

    BalasHapus
    Balasan
    1. 1. ubah class di tag img menjadi "lazy1".
      2. di di dalam script di atas cari img.lazy ubah menjadi img.lazy1.
      3. masih di script cari remove("lazy") menjadi remove("lazy1")

      Hapus
  4. Min, untuk thema seleseven saya sudah ikutin tutorialnya + juga ikutin replyan kamu di comment orang min, tapi kenapa gagal terus ya? udah dicoba beberapa opsi masih ga bisa juga.

    BalasHapus
    Balasan
    1. maksudnya mau menerapkan tutorial lazy load ini untuk template selesevn min

      Hapus
    2. tambahkan ini di atas script lazy load nya.
      jQuery(window).unbind();

      Hapus
  5. Lazyload untuk chatango ada gak min?

    BalasHapus
    Balasan
    1. https://www.dagruel.com/2022/01/source-code-lazy-load-script-external.html?showComment=1642230514482#c4628981109142773399

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!