今日、進行状況バーの読み込みプロセスが実装されており、DOM構造は実際には2つのDIVです
<div> <div id = "percent_bar"> </div> </div>
内部divの広い幅の属性を制御することにより、進行状況バーで前進する効果を実現できます。
私の進行状況バーは、ファイルのダウンロードの進捗を示しています。合計100個のファイルを実装するだけで、1つをダウンロードすると1％になり、20個のダウンロードが20％に達します。したがって、コードは次のように実装されます。
var filecount = filelist.length（）; filelist.foreach（function（i、obj）{..... //ファイルdocument.getElementbyid（ "percent_bar"）。style.width= i/filecount*100 + "％"; //内側のdivの幅を変更します}））ただし、ファイルは1つずつダウンロードされていますが、進捗状況は移動していません。これは、JSロジックが最初に実行されるためであり、JSの実行が終了した後にのみページレンダリングが実行されるため、通常の進行状況バーは表示されません。
JSロジックを実行して、ファーストクラスのページレンダリングを待つにはどうすればよいですか？
var i = 0; var filecount = filelist.length（）; var loop = function（）{if（i> filecount）//ループリターンを終了します。 ...... //ファイルi ++をダウンロードしてください。 document.getElementById（ "percent_bar"）。style.width = i/filecount*100+"％"; //次のループthat.loopid = window.settimeout（loop、0）; 7} that.loopid = window.settimeout（loop、0）;Progress Barの動的効果は、SettimeOut関数を通じて実現できます。
上記の記事では、JSによるDOM要素の属性を動的に変更した後、ページのタイムリーなレンダリングの問題を迅速に解決します。これは、エディターが共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そして私は誰もがwulin.comをもっとサポートできることを願っています。