√ Lazyload Image dengan Animasi Preloader

Lazyload Image dengan Animasi Preloader

4.4.23

Menambahkan Animasi Preloader pada Gambar yang Menggunakan Lazyload merupakan salah satu cara untuk memberikan pengalaman baik kepada pengunjung blog.

Artikel sebelumnya admin juga sudah membahas mengenai cara menunda loading atau pemuatan gambar untuk mempercepat blog ketika diakses oleh pengunjung. Bagi kalian yang belum sempat membaca artikelnya silakan dibaca dan dipraktekkan terlebih dahulu karena tutorial kali ini akan menyambung pembahasan sebelumnya.

Baca juga: Menunda Loading Gambar untuk Mempercepat Blog

Contoh penerapan dari tutorial diatas dapat kalian lihat pada blog ini, jika pengunjung mengunjungi blog ini maka akan nampak sebagian besar gambar dijeda pemuatannya sampai pengunjung melakukan scroll halaman. Itu bisa kalian lihat contohnya pada tanda panah sesuai gambar dibawah ini.

Selain itu akan nampak pula animasi preloader pada masing-masing thumbnail gambar artikel yang dijeda pemuatannya. Berikut ini adalah tutorial singkat bagaimana menerapkan animasi preloader pada gambar thumbnail yang menggunakan lazyload.

CSS Animasi Preloader

Berikut admin berikan dua contoh css preloader yang bisa kalian terapkan pada blog. Silakan kalian pilih salah satu saja kemudian letakkan diatas tag </style> .

Preloader 1

/* Load Content */
.idebelajarku{left:0;top:0;right:0;bottom:0;width:20px;height:20px;margin:auto;position:absolute}.idebelajarku .idebelajarku-inner-1,.idebelajarku .idebelajarku-inner-2,.idebelajarku .idebelajarku-inner-3,.idebelajarku .idebelajarku-inner-4{display:block;width:4px;height:4px;border-radius:20px;position:absolute}.idebelajarku .idebelajarku-inner-1:before,.idebelajarku .idebelajarku-inner-2:before,.idebelajarku .idebelajarku-inner-3:before,.idebelajarku .idebelajarku-inner-4:before{content:&amp;#39;&amp;#39;;display:block;width:3px;height:3px;border-radius:20px;position:absolute;right:0;animation-name:loading-1;animation-iteration-count:infinite;animation-direction:normal;animation-duration:1.5s}.idebelajarku .idebelajarku-inner-1{top:0;left:0;transform:rotate(70deg)}.idebelajarku .idebelajarku-inner-1:before{background:rgba(0,0,0,0.25)}.idebelajarku .idebelajarku-inner-2{top:0;right:0;transform:rotate(160deg)}.idebelajarku .idebelajarku-inner-2:before{background:rgba(0,0,0,0.25)}.idebelajarku .idebelajarku-inner-3{bottom:0;right:0;transform:rotate(-110deg)}.idebelajarku .idebelajarku-inner-3:before{background:rgba(0,0,0,0.25)}.idebelajarku .idebelajarku-inner-4{bottom:0;left:0;transform:rotate(-20deg)}.idebelajarku .idebelajarku-inner-4:before{background:rgba(0,0,0,0.25)}.Night .idebelajarku .idebelajarku-inner-1:before,.Night .idebelajarku .idebelajarku-inner-2:before,.Night .idebelajarku .idebelajarku-inner-3:before,.Night .idebelajarku .idebelajarku-inner-4:before{background:rgba(255,255,255,0.25)}
@keyframes loading-1{0%{width:4px;right:0}30%{width:16px;right:-11px}60%{width:4px;right:-11px}}

Preloader 2

/* Preloader */
idebelajarsaya{overflow:hidden;left:0;right:0;top:0;bottom:0;position:absolute;z-index:2}.status{width:50px;height:30px;left:0;right:0;top:17px;bottom:0;position:absolute;margin:auto}.spinnerno{margin:0 auto;width:50px;height:12px;text-align:center;font-size:0}.spinnerno &gt; div{background:rgba(155,170,175,0.22);height:100%;width:2px;border-radius:8px;display:inline-block;animation:stretchdelay 1.2s infinite ease-in-out}.spinnerno .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinnerno .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.spinnerno .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.spinnerno .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.Night .spinnerno &gt; div{background:rgba(255,255,255,0.25)}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}

Menerapkan CSS Preloader 1

Cari tag <b:if cond='data:post.thumbnail'> atau tag <div class='item-thumbnail'> sesuai template blog yang kalian gunakan. Tag tersebut bisa saja lebih dari satu jadi kalian harus coba sendiri untuk melihat hasilnya.

Langkah berikutnya adalah salin kode dibawah ini jika kalian memakai css Preloader 1 dan letakkan tepat dibawah kode tag <b:if cond='data:post.thumbnail'> atau tag <div class='item-thumbnail'> yang kalian cari tadi.

<div class='idebelajarku'>
<span class='idebelajarku-inner-1'/>
<span class='idebelajarku-inner-2'/>
<span class='idebelajarku-inner-3'/>
<span class='idebelajarku-inner-4'/>
</div>

Menerapkan CSS Preloader 2

Atau salin kode dibawah ini jika kalian memakai css Preloader 2 dan letakkan tepat dibawah kode tag <b:if cond='data:post.thumbnail'> atau tag <div class='item-thumbnail'> yang kalian cari tadi.

<div class='idebelajarsaya'>
<div class='status'>
<div class='spinnerno'>
<div class='rect1'></div>
<div class='rect2'></div>
<div class='rect3'></div>
<div class='rect4'></div>
<div class='rect5'></div>
</div>
</div>
</div>

Demikian tutorial singkat bagaimana menambahkan animasi preloader pada lazyload image, jika ada yang kurang paham bisa menuliskan pertanyaan pada kolom komentar dibawah. Selamat mencoba!