×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

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://1.bp.blogspot.com/-R9YKzIdHZAc/Xf3b-A-7fnI/AAAAAAAABMM/j8vlGdYVHDggAJOMMFO9Da-zrjW2-u-kwCLcBGAsYHQ/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.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

4 Responses to "Cara Memasang Auto Lazyload Image di Blog Hanya Dengan Javascript"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Katanya Javacript bisa memperburuk pagespeed pada blog? Ini benar enggak?

    ReplyDelete
    Replies
    1. Memang betul, tapi itu semua tergantung javascript yang dibuat,

      Tapi menggunakan script.lazt load image juga berfungsi untuk menambah kecepatan blog

      Delete
  2. Replies
    1. Lihat di javascript Lazyload, disitu ada URL Gif, ganti dengan Url Gif Loading punyamu

      Link membuat GIF : loading(.)io

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With