Hallo sobat rumah code kali ini rumah code akan membahas bagaimana cara memasukan gambar di html dengan lazy load. Tutorial lazy load image ini murni akan menggunakan javascript saja jadi tidak akan menggunakan jquery atau plugin lain.
Apa sih yang dimaksud dengan istilah lazy load? yang dimaksud dengan lazy load pada html adalah mengeksekusi atau meload sebuah html element setelah semua element html yang lain berhasil di load secara normal.
Nah berarti yang dimaksud dengan lazy load image adalah meload image setelah halaman website berhasil diload semua.
Kenapa harus pasang lazy load di blog atau website? karenan lazy load ini membuat website kita akan lebih ringan dan akan cepat diload.
Sekarang perhatikan sourcode html di bawah ini
<img src="gambar.jpg">source code di atas adalah cara memasukan gambar di html secara normal. Nah sekarang gimana sih cara memasukan gambar di html dengan cara lazy load image.
Untuk memasukan gambar dengan lazy load sebenarnya gak beda jauh dengan cara biasa. Coba perhatikan source code di bawah
<img data-src="gambar.jpg">Source code di atas adalah cara memasukan gambar di html dengan menggunakan lazy load. Pada source code elemen img diatas tidak ada tag src yang ada hanya tag data-src. Nanti tugas nya javasript lah yang menambahkan atribut src pada img di atas. Source code javascript nya gimana? Perhatikan source code di bawah ini
<script>
var imgTag = document.getElementsByTagName('img');
for (var a=0; a<imgTag.length; a++) {
if(imgTag[a].getAttribute('data-src')) {
imgTag[a].setAttribute('src',imgTag[a].getAttribute('data-src'));
imgTag[a].removeAttribute('data-src');
}
}
</script>nah script di atas adalah script javascript untuk lazy load image. Pada script di atas javascript akan mencari semua tag img dan mengambil value dari atribut data-src lalu akan menambahkan atribut src kemudian akan menghapus atribut data-src. Untuk skrip lengkap html nya kamu bisa lihat source code di bawah ini
<!DOCTYPE html>
<html>
<body>
<h1>Tutorial Membuat Lazy Load image</h1>
<img alt="Tutorial Lazy Load Javascript" data-src="gambar.jpg" src="thumbnail\gambar.jpg" style="width: 300px; height=250px;">
<script>
var imgTag = document.getElementsByTagName('img');
for (var a=0; a<imgTag.length; a++) {
if(imgTag[a].getAttribute('data-src')) {
imgTag[a].setAttribute('src',imgTag[a].getAttribute('data-src'));
imgTag[a].removeAttribute('data-src');
}
}
</script>
</body>
</html>pada source code di atas adalah lazy load dengan memberikan efek buram karenan tag img akan meload gambar yang ukuran nya lebih kecil terlebih dahulu baru akan di load gambar dengan ukuran asli setelah semua halaman berhasil di load. Nah inilah kenapa pasang lazy load di blog akan membuat blog dapat dibukan menjadi lebih cepat.
