Heute wird ein Fortschrittsbalkenbeladungsprozess implementiert und die DOM -Struktur ist tatsächlich zwei Divs
<div> <div id = "prozent_bar"> </div> </div>
Durch die Kontrolle des breiten Attributs der inneren DIV können Sie den Effekt der Weiterentwicklung der Fortschrittsleiste erreichen.
Meine Fortschrittsleiste zeigt den Fortschritt des Herunterladens von Dateien. Wenn Sie einfach insgesamt 100 Dateien implementieren, beträgt das Herunterladen von 1%und das Herunterladen von 20%. Der Code wird also wie folgt implementiert:
var fileCount = filelist.length (); filelist.foreach (Funktion (i, obj) {..... // Datei document.getElementById ("Prozent_Bar"). Style.width = i/fileCount*100 + "%"; // Ändern Sie die Breite des inneren Divs})Sie werden jedoch sehen, dass Dateien nacheinander heruntergeladen werden, aber der Fortschritt hat sich nicht verschoben. Dies liegt daran, dass die JS -Logik zuerst ausgeführt wird und das Seitenwechsel erst nach Abschluss der JS -Ausführung durchgeführt wird, sodass Sie keine normale Fortschrittsleiste sehen können.
Wie kann ich JS Logic dazu bringen, die erstklassige Seitenwiedergabe auszuführen und zu warten?
var i = 0; var fileCount = filelist.length (); var loop = function () {if (i> fileCount) // Beende die Rendite der Schleife; ...... // Datei i ++ herunterladen; document.getElementById ("prozenta_bar"). style.width = i/fileCount*100+"%"; // nächste Schleife that.loopid = window.settimeout (Loop, 0); 7} that.loopid = window.settimeout (Loop, 0);Der dynamische Effekt der Fortschrittsbalken kann durch die SetTimeout -Funktion erreicht werden.
Der obige Artikel löst schnell das Problem der rechtzeitigen Wiedergabe von Seiten, nachdem die Dynamik der Attribute von DOM -Elementen durch JS alle vom Editor geteilten Inhalte geteilt werden. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, jeder kann Wulin.com mehr unterstützen.