(Saat halaman web dimuat, kadang -kadang konten terlalu banyak, dan telah dimuat dan menunggu. Pada saat ini, halaman web menunjukkan bahwa White tidak menampilkan apa pun. Pengalaman pengguna cukup buruk. Oleh karena itu bentuk strip ditampilkan untuk pengguna.
Cara -cara umum adalah sebagai berikut:
1. Bilah kemajuan timer (palsu) <type skrip = text/javascript> $ (function () {var loading = '<div class = loading> <div class = pic> </div> </div>'; $ (body). g); function () {$ ( 2. Konten Akuisisi Nyata, sadari bilah kemajuan pemuatanUntuk memuat bilah kemajuan sesuai dengan konten nyata, dua titik pengetahuan diperkenalkan di bawah ini:
document.onreadystatechange halaman memuat status perubahan peristiwa
Dokumen.ReadyState Mengembalikan status dokumen saat ini
1. Uninisialisasi -Tidak ada yang mulai memuat
2. Memuat -
3. Interaktif -Loaded, dokumen dan pengguna dapat mulai berinteraksi
4. Lengkap -Loading Lengkap
2.1. Anda dapat memodifikasi kode timer menjadi: Document.onReadyStateChange = function () {if (documeted.readystate == complete) {$ (. loading) .fadeout ();}} 2.2.Situs Web yang Disarankan: https://preloaders.net/ Situs web ini memiliki berbagai animasi kecil yang menunjukkan pemuatan yang dimuat
http://autoprefixer.github.io/ untuk menambahkan awalan ke css online
https://loading.io/ animasi kecil progresif
2.3: Kemajuan diposisikan di kepala, seperti yang ditunjukkan di bawah ini:Catatan: Realisasi ini bukan tampilan nyata dari kemajuan pemuatan, tetapi menggunakan: Prinsip eksekusi kode dari atas ke bawah
Dalam posisi kode yang berbeda, ubah lebar garis.
Seperti yang ditunjukkan di bawah ini:
2.4 Dapatkan bilah kemajuan untuk memuat data secara real timeBuat Objek Gambar: Gambar Objek Gambar = Gambar Baru ();
Gunakan: Acara online
Catatan: Atribut SRC harus ditulis di belakang Onload, jika tidak program akan membuat kesalahan di IE
Di atas adalah semua konten dari artikel ini.