Cara Memasang Auto Lazyload Image di Blog Hanya Dengan Javascript

Kali ini saya akan membagikan sebuah script lazyload image untuk blogspot (blogger), sebelum terjun ke tutorial kita bahas bahas dulu mengenai apa itu Lazyload dan apa manfaatnya.r

Apa itu LazyLoad Image?

Jika Lazyload diartikan dalam bentuk Umum, lazy load memiliki arti pola desain yang biasa digunakan dalam pemrograman komputer untuk menunda inilisiasi suatu objek sampai pada titik dibutuhkannya. Nah karna kita menggunakan platform blogger kita dapat mengartikan Lazyload sebagai sebuah fitur yang ada pada blog yang memungkinkan gambar yang dimuat akan tampil jika terjadi aksi dari pengguna tersebut didalam blog kita.

Apa Fungsi LazyLoad Image?

Lazyload sendiri juga memiliki fungsi yang sangat bagus untuk web kamu, berikut dibawah ini manfaat memasang LazyLoad :

1. Menambah kecepatan loading blog
   Tentunya kamu tidak ingin kan memiliki kecepatan loading blog yang sangat lamban, karna itu sangat mengganggu bagi pengunjung web, dan jika kamu memiliki web yang lamban pastinya pengunjung memilih web lain untuk disinggahi karna kecepatan tersebut.
2. Menambah Skor diGTMetrix, Pagespeed Insight
   Jika kamu seorang pemilik web, pastinya tidak asing lagi dong dengan kedua website diatas, yang mana website tersebut berguna untuk mengetes atau menguji kecepatan web kamu dan akan menampilkan skor web kamu berdasarkan penilain mereka.
3. Mengatasi masalah Laverage Browser Caching
   Laverage Browser Caching merupakan sistem penyimpanan sementara file file statis yang dipergunakan pada halaman web dengan tujuan untuk mempercepat  halaman muat web tersebut.

Nah itulah Tiga (3) manfaat dari memasang LazyLoad, nah bagi kamu yang ingin memasang LazyLoad, kamu dapat ikuti tutorial dibawah ini. Lazyload yang saya bagikan ini pemasangannya sungguh sangat mudah karna hanya menggunakan Javascript saja, Yuk langsung saja kita ke tutorial pemasangannya :

Cara Memasang LazyLoad Image

Semua gambar yang ada di web atau blog kamu akan terkena Lazyload karena menggunakan fullpage script.
Penting !! Sebelum memasang kode Lazyload dibawah, kamu harus memastikan web atau blog sudah terpasang jQuery versi 2 keatas

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

1. Seperti biasa login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ➞ Edit HTML,
3. Setelah masuk ke Edit HTML, kemudian cari kode </body>, lalu Copykan kode Javascript dibawah ini dan letakkan tepat diatas kode yang saya sebutkan sebelumnya,

   <script type="text/javascript">
   //<![CDATA[
   !function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";const e={src:"data-src",srcset:"data-srcset",selector:".lazyload"},r=function(){let t={},e=!1,s=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);let n=function(s){for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e&&"[object Object]"===Object.prototype.toString.call(s[o])?t[o]=r(!0,t[o],s[o]):t[o]=s[o])};for(;s<o;s++){n(arguments[s])}return t};function s(t,s){this.settings=r(e,s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(s.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){if(t.intersectionRatio>0){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage="url("+r+")"}})},{root:null,rootMargin:"0px",threshold:[0]}),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage="url("+r+")"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new s(t,e)},t.jQuery){const e=t.jQuery;e.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||"data-src",new s(e.makeArray(this),t),this}}return s}); $('img').addClass('lazyload'); $("img").each(function() { var $this = $(this), src = $this.attr("src"); $this.attr( "data-src", src ); $this.removeAttr("src"); }); $('img').attr('src', "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdne4yqHsHQAaSl_Cwr2KH_etswTWbeGRT4a6R6ZM4B9ZSziqB__3gXvmHulzJQAKvZ1OxxptxAk8pf290TuPNSTQsjhyphenhyphen4K39PCagUhjA6i7V71JZFI9lybEea7Y6A06DCZ7XQhUAunzbV/s1600/AnirockLoading.gif"); window.addEventListener("scroll", function(event) { lazyload(); }); $(window).on('load', function () { $('img').each(function () { if (lazyload(this)) { $(this).attr('src', $(this).data('src')).removeAttr('data-src'); } }); });
   //]]>
   </script>

4. Terakhir simpan/save template.

Sekian tutorial yang memasang lazyload image yang dapat saya bagikan untuk teman teman blogger, untuk demo lazyload tersebut kalian dapat melihatnya melalui tombol DEMO dibawah ini.

DEMO