วันนี้กระบวนการโหลดแถบความคืบหน้าจะถูกนำไปใช้และโครงสร้าง DOM เป็นสอง divs สอง divs
<div> <div id = "percent_bar"> </div> </div>
ด้วยการควบคุมแอตทริบิวต์ความกว้างที่กว้างของ DIV ภายในคุณสามารถบรรลุผลของการก้าวไปข้างหน้าบนแถบความคืบหน้า
แถบความคืบหน้าของฉันแสดงความคืบหน้าของการดาวน์โหลดไฟล์ หากคุณใช้ไฟล์ทั้งหมด 100 ไฟล์การดาวน์โหลดไฟล์จะเป็น 1%และการดาวน์โหลด 20 จะถึง 20% ดังนั้นรหัสจะถูกนำไปใช้ดังนี้:
var fileCount = fileList.length (); filelist.foreach (ฟังก์ชั่น (i, obj) {..... // ดาวน์โหลดไฟล์ document.getElementById ("percent_bar"). style.width = i/fileCount*100 + "%"; // เปลี่ยนความกว้างของ div ภายใน})แต่คุณจะเห็นไฟล์ที่ดาวน์โหลดทีละไฟล์ แต่ความคืบหน้ายังไม่ย้าย นี่เป็นเพราะ JS Logic จะถูกดำเนินการก่อนและการเรนเดอร์หน้าจะดำเนินการเฉพาะหลังจากการดำเนินการ JS เสร็จสิ้นดังนั้นคุณจะไม่เห็นแถบความคืบหน้าปกติ
ฉันจะทำให้ JS Logic ดำเนินการและรอการแสดงผลหน้าชั้นหนึ่งได้อย่างไร
var i = 0; var fileCount = fileList.length (); var loop = function () {ถ้า (i> fileCount) // ออกจากการวนกลับ ...... // ดาวน์โหลดไฟล์ i ++; document.getElementById ("percent_bar"). style.width = i/fileCount*100+"%"; // ลูปถัดไป that.loopid = window.settimeout (ลูป, 0); 7} that.loopid = window.settimeout (ลูป, 0);เอฟเฟกต์แบบไดนามิกของแถบความคืบหน้าสามารถทำได้ผ่านฟังก์ชั่น settimeout
บทความข้างต้นแก้ไขปัญหาของการแสดงผลของหน้าเว็บได้อย่างรวดเร็วหลังจากเปลี่ยนแอตทริบิวต์ขององค์ประกอบ DOM แบบไดนามิกโดย JS เป็นเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น