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>
[AdsWithin]
tlong kunjungi ya http://marhaen.rplb6.com lg ada tgas sekolah dapat 5000 visitor