(เมื่อโหลดเว็บเพจบางครั้งเนื้อหาก็มากเกินไปและมีการโหลดและรออยู่ในเวลานี้หน้าเว็บแสดงให้เห็นว่าสีขาวไม่แสดงอะไรเลยประสบการณ์ของผู้ใช้ค่อนข้างแย่ดังนั้นรูปแบบของแถบ จะปรากฏขึ้นสำหรับผู้ใช้
วิธีการทั่วไปมีดังนี้:
1. แถบความคืบหน้าของตัวจับเวลา (ปลอม) <script type = text/javascript> $ (function () {var loading = '<div class = การโหลด> <div class = pic> </div> </div>'; $ (body). g); function () {$ (. การโหลด) 2. เนื้อหาการได้มาของจริงตระหนักถึงแถบความคืบหน้าการโหลดในการโหลดแถบความคืบหน้าตามเนื้อหาจริงมีการแนะนำจุดรู้สองจุดด้านล่าง:
document.onreadyStateChange การโหลดสถานะเหตุการณ์การเปลี่ยนแปลงเหตุการณ์
document.readystate ส่งคืนสถานะของเอกสารปัจจุบัน
1. Uninitialized -ยังไม่เริ่มโหลด
2. โหลด -
3. การโหลด -โหลดเอกสารและผู้ใช้สามารถเริ่มโต้ตอบได้
4. การโหลดเสร็จสมบูรณ์
2.1. คุณสามารถปรับเปลี่ยนรหัสของตัวจับเวลาเป็น: document.onreadyStateChange = function () {if (documeted.readyState == เสร็จสมบูรณ์) {$ (. การโหลด) .fadeout ();}} 2.2. แสดงภาพเคลื่อนไหวเล็ก ๆ ของแถบความคืบหน้าใน CSSเว็บไซต์ที่แนะนำ: https://preloaders.net/ เว็บไซต์นี้มีภาพเคลื่อนไหวขนาดเล็กที่ระบุว่าโหลดโหลด
http://autoprefixer.github.io/ เพื่อเพิ่มคำนำหน้าลงใน CSS ออนไลน์
https://loading.io/ แอนิเมชันขนาดเล็กแบบก้าวหน้า
2.3: ความคืบหน้าอยู่ในตำแหน่งในหัวดังที่แสดงด้านล่าง:หมายเหตุ: การรับรู้นี้ไม่ใช่การแสดงความคืบหน้าการโหลดจริง แต่ใช้: หลักการของการดำเนินการรหัสจากบนลงล่าง
ในตำแหน่งที่แตกต่างกันของรหัสเปลี่ยนความกว้างของบรรทัด
ดังที่แสดงด้านล่าง:
2.4 รับแถบความคืบหน้าสำหรับการโหลดข้อมูลแบบเรียลไทม์สร้างออบเจ็กต์ภาพ: ชื่อวัตถุภาพ = ภาพใหม่ ();
ใช้: กิจกรรมออนไลน์
หมายเหตุ: แอตทริบิวต์ SRC จะต้องเขียนไว้เบื้องหลัง OnLoad มิฉะนั้นโปรแกรมจะทำให้เกิดข้อผิดพลาดใน IE
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้