Hoje, um processo de carregamento da barra de progresso é implementado e a estrutura DOM é na verdade dois divs
<div> <div id = "porcent_bar"> </div> </div>
Ao controlar o amplo atributo de largura da div, você pode alcançar o efeito de avançar na barra de progresso.
Minha barra de progresso mostra o progresso do download de arquivos. Se você simplesmente implementar um total de 100 arquivos, o download de um será de 1%e o download de 20 chegará a 20%. Portanto, o código é implementado da seguinte forma:
var fileCount = filelist.length (); filelist.foreach (function (i, obj) {..... // download do arquivo document.getElementById ("porcent_bar"). style.width = i/fileCount*100 + "%"; // altera a largura do div.Mas você verá arquivos baixados um por um, mas o progresso não foi movido. Isso ocorre porque a lógica JS será executada primeiro e a renderização de páginas será executada somente após o término da execução do JS, para que você não possa ver uma barra de progresso normal.
Como posso fazer a lógica JS executar e aguardar a renderização da página de primeira classe?
var i = 0; var fileCount = filelist.length (); var loop = function () {if (i> fileCount) // saia do retorno do loop; ...... // Baixar arquivo i ++; document.getElementById ("%_bar"). style.width = i/fileCount*100+"%"; // Próximo loop that.loopid = window.setTimeout (loop, 0); 7} that.loopid = window.setTimeout (loop, 0);O efeito dinâmico da barra de progresso pode ser alcançado através da função Settimeout.
O artigo acima resolve rapidamente o problema da renderização oportuna das páginas após a alteração dinamicamente os atributos dos elementos DOM por JS é todo o conteúdo compartilhado pelo editor. Espero que possa lhe dar uma referência e espero que todos possam apoiar mais o Wulin.com.