Cara Membuat Lazyload Image Ala IDNews.co
Log In

Cara Membuat Lazyload Image Ala IDNews.co

Sunday, October 20, 2019, 3:50 PM
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 Tutorial IDNews.co ini.

Berikut tutorial menerapkan lazyload image di blog :

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


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

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

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

.idnewscoShake {
 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: idnewscoShake 3s linear infinite;
 -webkit-animation: aurealisaShake 3s linear infinite;
 -o-animation: aurealisaShake 3s linear infinite
}

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

2. Masukkan js dibawah ini sebelum head, catatan : kode sudah di minify sepenuhnya.
<script>
//<![CDATA[//
// LazyLoad by Idnews.co
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.
Baca Juga
Sign out

TerPopuler