Cara menampilkan layar pemuatan saat konten situs dimuat
Saya sedang mengerjakan sebuah situs yang berisi sejumlah besar mp3 dan gambar, dan saya ingin menampilkan gif pemuatan saat semua konten dimuat.
Saya tidak tahu bagaimana cara mencapai hal ini, tetapi saya memiliki gif animasi yang ingin saya gunakan.
Ada saran?
Biasanya situs yang melakukan ini dengan memuat konten melalui ajax dan mendengarkan acara readystatechanged untuk memperbarui DOM dengan GIF pemuatan atau konten.
Bagaimana Anda saat ini memuat konten Anda?
Kodenya akan mirip dengan ini:
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}Ada banyak library javascript pihak ketiga yang dapat membuat hidup Anda lebih mudah, tetapi yang di atas adalah semua yang Anda butuhkan.
Anda mengatakan bahwa Anda tidak ingin melakukan ini di AJAX. Meskipun AJAX sangat bagus untuk hal ini, ada cara untuk menampilkan satu DIV sambil menunggu seluruh <body> dimuat. Seperti ini:
<html>
<head>
<style media="screen" type="text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload="downLoad()">
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>Event onload tidak akan muncul sampai semua halaman dimuat. Jadi layer2 &<DIV> tidak akan ditampilkan sampai halaman selesai dimuat, setelah itu onload akan menyala.
Sebenarnya ada cara yang cukup mudah untuk melakukan ini. Kodenya harus seperti ini:
<script type="test/javascript">
function showcontent(x){
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}Dan dalam HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>Saya melakukan sesuatu seperti itu di halaman saya dan berfungsi dengan baik.
