Apa sih lazyload ? Lazy Load adalah sebuah teknik untuk membuat pemuatan gambar di website menjadi tidak sinkron, Dengan artian setelah konten bagian atas sepenuhnya dimuat, Maka gambar tidak akan dimuat [Sumber: Jagoan Hosting]
Sebelumnya disini saya tidak menggunakan atribute default HTML5 load="lazy", tetapi menggunakan javascript tambahan yaitu lazysizes yang bisa kalian lihat source code nya di github
- Kalian download dulu lazysizes.min.js dan kalian simpan di
static/js dengan nama lazysizes.min.js - Lalu kalian tambahkan script nya ke
header.html atau footer.html
1
| <script src={{ "js/lazysizes.js" | absURL }} async as="script"></script>
|
- Atau kalian bisa menggunakan cdn, tambahkan snippet berikut di
header.html atau footer.html
1
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" integrity="sha512-JrL1wXR0TeToerkl6TPDUa9132S3PB1UeNpZRHmCe6TxS43PFJUcEYUhjJb/i63rSd+uRvpzlcGOtvC/rDQcDg==" crossorigin="anonymous"></script>
|
- Buat
render-image.html di folder layouts/_default/_markup/
1
2
3
4
| layouts
└── _default
└── _markup
└── render-image.html
|
- Tambahkan snippet HTML berikut ini di
render-image.html
1
| <img class="lazyload" data-src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}">
|
- Jika sudah kalian save, setelah itu kalian bisa coba tambahkan gambar di post kalian menggunakan format default markdown
1
| 
|
- Jika berhasil, maka gambar akan muncul dengan sempurna dan terdapat
class="lazyload", jika gambar tidak muncul pastikan tidak ada error yang berhubungan dengan lazysizes.min.js, atau kalian bisa lihat di Inspect Element bagian Console disana akan terdapat error yang akan memudahkan kalian untuk memecahkan masalahnya.
