Saat kita menjelajahi web, kita sering melihat perintah LOADING yang muncul saat data sedang dimuat. Sebenarnya prinsip fungsi ini sangat sederhana, yaitu DIV menutupi halaman saat ini, dan kemudian Loading ditampilkan pada lapisan DIV yang tertutup.
1.Halaman saat ini:
Copy kode kodenya sebagai berikut:
<div><a href="#" onclick="showLoading()">Memuat</a></div>
2. Lapisan topeng:
Copy kode kodenya sebagai berikut:
<div id="lebih"></div>
3.Memuat lapisan tampilan:
Copy kode kodenya sebagai berikut:
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
Kode keseluruhan:
Copy kode kodenya sebagai berikut:
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<judul></judul>
<gaya tipe="teks/css">
.saat ini a {
ukuran font: 20px;
}
.lebih {
tampilan: tidak ada;
posisi: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
warna latar belakang: #f5f5f5;
opacity:0,5;
indeks-z: 1000;
}
.tata letak {
tampilan: tidak ada;
posisi: mutlak;
atas: 40%;
kiri: 40%;
lebar: 20%;
tinggi: 20%;
indeks-z: 1001;
perataan teks:tengah;
}
</gaya>
<skrip tipe="teks/javascript">
fungsi menunjukkan Memuat()
{
document.getElementById("over").style.display = "blok";
document.getElementById("layout").style.display = "blok";
}
</skrip>
</kepala>
<tubuh>
<div><a href="#" onclick="showLoading()">Memuat</a></div>
<div id="lebih"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</tubuh>
</html>
Efek akhir:
Saya juga melihat metode implementasi lain di Internet. Menurut saya idenya bagus, yaitu menggunakan JS untuk terus mengubah nilai tag html untuk mencapai efek memuat petunjuk kodenya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<judul></judul>
<!-- <skrip src="Scripts/jquery-1.8.2.js"></script>-->
<gaya tipe="teks/css">
#tb {
lebar: 100%;
tinggi: 100%;
tinggi garis: 10px;
}
#tb tr td {
perataan teks: tengah;
}
.bilah kemajuan {
keluarga font: Arial;
font-weight: lebih tebal;
warna: abu-abu;
warna latar belakang: putih;
bantalan: 0 piksel;
gaya perbatasan: tidak ada;
}
.persen {
keluarga font: Arial;
warna: abu-abu;
perataan teks: tengah;
lebar batas: sedang;
gaya perbatasan: tidak ada;
}
</gaya>
<skrip tipe="teks/javascript">
var bilah = 0;
var langkah = "||";
/*
*Cara pertama adalah: $(document).ready(function(){.....});
*/
//$(fungsi () {
// kemajuan();
//});
/*
*Cara kedua
*/
//jendela.onload = fungsi() {
// kemajuan();
//}
/*
*Cara ketiga mensimulasikan $(document).ready(function(){.....});
*/
(fungsi () {
var yaitu = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = fungsi () { for (var i = 0; i < fn.panjang; i++) fn[i]() };
var d = dokumen;
d.siap = fungsi (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
jika (fn.push(f) > 1) kembali;
jika (yaitu)
(fungsi () {
coba { d.documentElement.doScroll('kiri');
catch (err) { setTimeout(argumen.callee, 0);
})();
lain jika (minggu)
var t = setInterval(fungsi () {
if (/^(dimuat|selesai)$/.test(d.readyState))
clearInterval(t), jalankan();
}, 0);
};
})();
dokumen.siap(fungsi () {
kemajuan();
});
kemajuan fungsi() {
batang = batang + 2;
langkah = langkah + "||";
document.getElementById("persen").nilai = batang + "%";
document.getElementById("progressbar").value = langkah;
jika (batang <= 98) {
setTimeout("kemajuan()", 100);
}
}
</skrip>
</kepala>
<tubuh>
<tabel id="tb">
<tr>
<td>
<input type="text" size="50" id="persen" /></td>
</tr>
<tr>
<td>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</tabel>
</tubuh>
</html>
Efek akhir: