แสดงผล:
1) เมื่อคลิกโหลดการจำลองจะทำการโหลดแบบอะซิงโครนัส เบราว์เซอร์ถูกบล็อก แถบความคืบหน้าจะปรากฏขึ้น
แนวคิดการใช้งาน:
1. เมื่อผู้ใช้คลิกที่ปุ่มโหลดเพื่อดำเนินการตามคำขอแบบอะซิงโครนัส แถบโหลดจะปรากฏขึ้นเมื่อมีการเรียกวิธีการ
2. จะใช้แถบความคืบหน้าได้อย่างไร?
1) เพิ่ม div ใหม่ลงใน document.body เขียนทับเบราว์เซอร์ ตั้งค่าพื้นหลังจะเป็นสีเทา z-index = 999 ผู้ใช้ไม่สามารถแก้ไขค่าอินเตอร์เฟสเมื่อโหลด
2) เพิ่มไดนามิก div ลงใน document.body
การใช้รหัส:
main.html:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script src = "loading.js" charset = "utf-8"> </script> onclick = "showloading ()"> โหลด </ button> </body> </html>
โหลด. js:
การแสดงฟังก์ชั่น () {var overdiv = document.createElement ("div"); var loadingdiv = document.createElement ("div"); var childdiv1 = document.createelement ("div"); var childdiv2 = document.createelement ("div"); document.createElement ("div"); overdiv.classlist.add ('over'); loadingdiv.classlist.add ('Spinner'); childdiv1.classlist.a dd ('bounce1') childdiv2.classlist.add ('bounce2') childdiv3.classlist.add ('bounce3') loadingdiv.appendchild (childdiv1); Adingdiv.AppendChild (ChildDiv2); LoadingDiv.AppendChild (ChildDiv3); document.body.appendchild (overdiv); document.body.appendchild (loadingdiv) settimeout (function () {document.body.removechild (overdiv); document.body.removechild (loadingdiv)}, 5000);}loading.css
.Spinner {Width: 150px; Text-Align: Center; ซ้าย: 50%; Top: 50%; ตำแหน่ง: Absolute; Z-index: 1000;}. เหนือ {ความกว้าง: 100%; ความสูง: 100%; z-index: 998; 30px; พื้นหลังสี: #67CF22; แนวชายแดน: 100%; แสดง: inline-block; -webkit-animation: bountedelay 1.4s Infinite Ease-In-Out; Animation: Bouncedelay 1.4s Infinite Ease-Out; .bounce1 {-webkit-animation-delay: -0.32s; imation-delay: -0.32s;}. Spinner .bounce2 {-webkit-animation-delay: -0.16s; imation-delay: -0.16s;}@-webkit -webkit-transform: มาตราส่วน (0.0)} 40% {-webkit-transform: สเกล (1.0)}}@keyframes bouncedelay {0%, 80%, 100% {transfor: scale (0.0);-webkit-transform: scale (0.0);สรุป:
1. วิธีการสามารถยกขึ้นได้ ลงโทษคำขอ AJAX อีกครั้งหนึ่งครั้ง ใช้วิธีแถบอัตโนมัติเมื่อเรียกร้องขอ AJAX
2. ถ้าเป็นเชิงมุมเชิงมุมมีวิธีการตรวจสอบการโทร HTTP เพียงโทรหาวิธีการ Progress Bar เมื่อตรวจสอบคำขอการดำเนินการ HTTP ไม่จำเป็นต้องโทรหาวิธี Progress Bar ทุกครั้งที่คุณเรียกใช้การโทร HTTP และตรวจสอบคำขอการดำเนินการ HTTP ไม่จำเป็นต้องเรียกใช้วิธีการความคืบหน้าของแถบด้วยตัวเองทุกครั้งที่คุณดำเนินการ HTTP
เนื้อหาข้างต้นเกี่ยวข้องกับแถบความคืบหน้าการโหลดแบบอะซิงโครนัส JS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!