Aujourd'hui, un processus de chargement de la barre de progression est mis en œuvre, et la structure DOM est en fait deux div
<div> <div id = "%_bar"> </div> </div>
En contrôlant l'attribut large largeur de la div intérieure, vous pouvez réaliser l'effet de l'avenir sur la barre de progression.
Ma barre de progrès montre les progrès du téléchargement de fichiers. Si vous implémentez simplement un total de 100 fichiers, le téléchargement un sera de 1% et le téléchargement 20 atteindra 20%. Le code est donc implémenté comme suit:
var fileCount = fileList.length (); FileList.ForEach (fonction (i, obj) {..... // Télécharger le fichier document.getElementById ("%_bar"). style.width = i / fileCount * 100 + "%"; // modifier la largeur de la div intérieure})Mais vous verrez des fichiers téléchargés un par un, mais les progrès n'ont pas évolué. En effet, JS Logic sera exécuté en premier, et le rendu de page ne sera effectué qu'après la fin de l'exécution de JS, vous ne pouvez donc pas voir une barre de progrès normale.
Comment puis-je faire exécuter JS Logic et attendre le rendu de la page de première classe?
var i = 0; var fileCount = fileList.length (); var loop = function () {if (i> fileCount) // quitte la boucle return; ...... // Télécharger le fichier i ++; document.getElementById ("%_bar"). style.width = i / fileCount * 100 + "%"; // Loop suivant that.loopid = window.setTimeout (Loop, 0); 7} that.loopid = window.setTimeout (Loop, 0);L'effet dynamique de la barre de progrès peut être réalisé via la fonction Settimeout.
L'article ci-dessus résout rapidement le problème du rendu en temps opportun des pages après avoir modifié dynamiquement les attributs des éléments DOM par JS est tout le contenu partagé par l'éditeur. J'espère que cela peut vous donner une référence et j'espère que tout le monde pourra soutenir davantage Wulin.com.