Menampilkan gif pemuatan selama 5 detik secara otomatis
Saya ingin menampilkan gif pemuatan secara otomatis saat pengguna membuka situs web dan kemudian setelah 5 detik gif tersebut hilang.
Saya menemukan skrip ini yang melakukan apa yang saya inginkan, tetapi tidak melakukannya secara otomatis. Pengguna harus mengklik tombol untuk memulainya, yang mana hal ini tidak sesuai dengan tujuannya.
<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br>
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/ajax-loader.gif"></div><br>
<script type = "text/javascript">
function show() {
document.getElementById("myDiv").style.display="block";
setTimeout("hide()", 5000); // 5 seconds
}
function hide() {
document.getElementById("myDiv").style.display="none";
}
</script>Jika ada cara lain yang bisa saya lakukan, atau jika ada cara yang lebih baik, silakan beri komentar.
Cukup hapus onclick="show()", dan tambahkan show(); sebagai baris terakhir blok JavaScript Anda.
Selain itu, karena saya peka terhadap polusi ruang nama global, saya melakukannya seperti ini:
<script type="text/javascript">
(function(){
var myDiv = document.getElementById("myDiv"),
show = function(){
myDiv.style.display = "block";
setTimeout(hide, 5000); // 5 seconds
},
hide = function(){
myDiv.style.display = "none";
};
show();
})();
</script>
Sudahkah Anda mencoba window.onload?
Sesuatu yang mirip dengan itu:
<body onload="show();">
..snip
</body>
Tambahkan window.onload = show; pada akhir skrip Anda dan ini akan menampilkan pemuat segera setelah halaman selesai dimuat. Anda sebaiknya menggunakan event ini untuk apa pun yang ingin Anda lakukan saat pengguna membuka halaman, karena event ini memastikan seluruh halaman tersedia sebelum mencoba memanipulasi elemen pada halaman.
