Cara memasukan gambar di html dengan lazy load

Cara memasukan gambar di html dengan lazy load

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.

Cara memasukan gambar di html dengan lazy load

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.

Simak video Cara memasukan gambar di html dengan lazy load
Artikel Menarik Lainnya
javascript, tutarial javascript, lazy load, lazy load image, cara memasukan gambar di html, cara memasukan gambar di html dan css, cara memasukan background gambar di html, lazy load image, pasang lazy load blog, lazy load blog posts

loading...