Hanya tampilkan gambar saat halaman discroll

Saya terinspirasi dari situs pinterest.com dimana semua gambarnya diatur secara rapi. Saat kita membuka situs tersebut tidak semua gambar langsung ditampilkan. Hanya gambar yang tampak di layar saja yang diload oleh server sedangkan gambar yang ada di bawahnya tidak/belum diload. Jadi server hanya menampilkan yang pengguna minta saja walaupun dalam halaman tersebut banyak gambar yang mau ditampilkan. Karena bisa jadi pengguna hanya mau melihat sedikit saya tidak semuanya.

Untuk mencoba membuat seperti itu anda bisa mencoba script yang sudah saya siapkan. Script ini digunakan untukĀ menampilkan gambar secara bertahap. Saat halaman dibuka gambar tidak diload semua oleh browser. Hanya gambar yang tampak dilayar saja diload. Jika layar di scroll ke bawah maka gambar yang ada dibawahnya baru akan diload. Cara seperti ini akan menghemat bandwidth dan tidak menyebabkan browser pengunjung sibuk.

Cara membuatnya sangat sederhana seperti ini:

<!doctype html>
<html lang="en">
<head>
<title>blog.waroengweb.co.id</title>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".delay").lazyload({
		threshold : 200,
		effect : "fadeIn"
	});	
});
</script>
</head>
<body>
	<p align=center>Ini adalah demo cara menampilkan gambar sercara bertahap. Saat halaman dibuka gambar tidak diload semua oleh browser. Hanya gambar yang tampak dilayar saja diload. Jika layar di scroll ke bawah maka gambar yang ada dibawahnya baru akan diload. Cara seperti ini akan menghemat bandwidth dan tidak menyebabkan browser pengunjung sibuk.</p>
<div class="content">
	<div class="images">
		<img class="delay" data-original="img/demo/1.jpg">
	</div>

	<div class="images">
		<img class="delay" data-original="img/demo/2.jpg">
	</div>

	<div class="images">
		<img class="delay" data-original="img/demo/3.jpg">
	</div>

	<div class="images">
		<img class="delay" data-original="img/demo/4.jpg">
	</div>

	<div class="images">
		<img class="delay" data-original="img/demo/5.jpg">
	</div>

	<div class="images">
		<img class="delay" data-original="img/demo/6.jpg">
	</div>

	<div class="images">
		<img class="delay" data-original="img/demo/7.jpg">
	</div>
</div>
</body>
</html>

 

Demo

Download

 

[AdsWithin]

(Visited 534 times, 1 visits today)

Related Posts

One thought on “Hanya tampilkan gambar saat halaman discroll

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

WhatsApp chat