Today, a progress bar loading process is implemented, and the dom structure is actually two divs
<div> <div id="percent_bar"></div> </div>
By controlling the wide width attribute of the inner div, you can achieve the effect of moving forward on the progress bar.
My progress bar shows the progress of downloading files. If you simply implement a total of 100 files, downloading one will be 1%, and downloading 20 will reach 20%. So the code is implemented as follows:
var fileCount=fileList.length(); fileList.foreach(function(i,obj){ .....//Download file document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//Change the width of the inner div})But you will see files downloaded one by one, but the progress has not moved. This is because js logic will be executed first, and page rendering will be performed only after js execution is finished, so you cannot see a normal progress bar.
How can I make js logic execute and wait for first-class page rendering?
var i=0;var fileCount=fileList.length();var loop = function () { if(i>fileCount)//Exit the loop return; ......//Download file i++; document.getElementById("percent_bar").style.width=i/fileCount*100+"%"; //Next loop that.loopId = window.setTimeout(loop, 0); 7 } that.loopId = window.setTimeout(loop, 0);The dynamic effect of the progress bar can be achieved through the settimeout function.
The above article quickly solves the problem of timely rendering of pages after dynamically changing the attributes of dom elements by js is all the content shared by the editor. I hope it can give you a reference and I hope everyone can support Wulin.com more.