Cara Membuat Lazyload Image Ala Aurealisa

Pengalaman pengguna yang perlu diperhatikan oleh setiap webmaster, ketika menjumpai situs web dengan pemuatan yang lambat, itu akan membuat mereka meninggalkan situs anda. Jadi selain konten, anda juga perlu mempertimbangkan masalah mengoptimalkan waktu membuka halaman.

Cara di bawah adalah pengalaman yang saya pelajari dalam proses meningkatkan kinerja halaman blog Aurealisa ini.

Berikut tutorial menerapkan lazyload image di blog :

1. Salin css dibawah ini pada template kamu, kemudian sesuaikan lagi sesuai selera.

@keyframes aurealisaShake {
 0% {
  background-position: -400px 0
 }
 100% {
  background-position: 400px 0
 }
}

@-webkit-keyframes aurealisaShake {
 0% {
  background-position: -50% 0
 }
 100% {
  background-position: 50% 0
 }
}

@-moz-keyframes aurealisaShake {
 0% {
  background-position: -50% 0
 }
 100% {
  background-position: 50% 0
 }
}

.aurealisaShake {
 background: #eeeeee linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, .75) 20%, rgba(255, 255, 255, 0) 30%);
 background-size: 100% 100%;
 animation: aurealisaShake 3s linear infinite;
 -moz-animation: aurealisaShake 3s linear infinite;
 -webkit-animation: aurealisaShake 3s linear infinite;
 -o-animation: aurealisaShake 3s linear infinite
}

.aurealisaShake img {
 opacity: 0;
 transition: 1s all
}

2. Masukkan js dibawah ini sebelum head, catatan : kode sudah di minify sepenuhnya.

<script>
//<![CDATA[//
// LazyLoad by Aurealisa
function LazyOnScroll(){setTimeout(function(){function e(){for(var e=document.getElementsByClassName("lazy"),n=0;n<e.length;n++)t(e[n])&&(e[n].src=e[n].getAttribute("data-src"));var o;o=document.querySelectorAll(".aurealisaShake"),[].forEach.call(o,function(e){e.classList.remove("aurealisaShake")})}function t(e){var t=e.getBoundingClientRect();return t.bottom>=0&&t.right>=0&&t.top<=(window.innerHeight||document.documentElement.clientHeight)&&t.left<=(window.innerWidth||document.documentElement.clientWidth)}function n(e,t){window.addEventListener?window.addEventListener(e,t):window.attachEvent("on"+e,t)}n("load",e),n("scroll",e),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,o=function(e,t,n,o){return(e/=o/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,i=n.scrollTop,r=document.getElementById(/[^#]+$/.exec(this.href)[0]).getBoundingClientRect().top,d=n.scrollHeight-window.innerHeight,c=d>i+r?r:d-i,l=function(e){var r=e-(t=t||e),d=o(r,i,c,900);n.scrollTop=d,900>r&&requestAnimationFrame(l)};requestAnimationFrame(l),e.preventDefault()})})},1e3)}window.addEventListener?window.addEventListener("load",LazyOnScroll,!1):window.attachEvent?window.attachEvent("onload",LazyOnScroll):window.onload=LazyOnScroll;
//]]>
</script>

3. Simpan dan lihat hasilnya.

Artikel penerapan lazyload lainnya yang mungkin akan membantu anda :

• 13 Cara Mempercepat Loading Blogger
• Membuat Lazy Load Pada Komentar Blogger
• Cara Mudah Mempercepat kecepatan tampilan Blogger