오늘날 진행 상황 바 로딩 프로세스가 구현되고 DOM 구조는 실제로 두 개의 div입니다.
<div> <div id = "centry_bar"> </div> </div>
내부 DIV의 넓은 너비 속성을 제어함으로써 진행률 표시 줄에서 앞으로 나아가는 효과를 달성 할 수 있습니다.
내 진행률 바는 파일 다운로드 진행 상황을 보여줍니다. 단순히 총 100 개의 파일을 구현하면 다운로드는 1%가되고 20 개의 다운로드는 20%에 도달합니다. 따라서 코드는 다음과 같이 구현됩니다.
var filecount = filelist.length (); filElist.foreach (function (i, obj) {..... // 파일 document.getElementById ( "cents_bar"). style.width = i/filecount*100 + "%"; // 내부 div의 너비 변경})그러나 파일이 하나씩 다운로드되는 것을 볼 수 있지만 진행 상황은 움직이지 않았습니다. JS 로직이 먼저 실행되고 페이지 렌더링이 JS 실행이 완료된 후에 만 수행되므로 일반적인 진행률 표시 줄을 볼 수 없습니다.
JS Logic을 실행하고 일류 페이지 렌더링을 기다리는 방법은 무엇입니까?
var i = 0; var filecount = filelist.length (); var loop = function () {if (i> filecount) // 루프 리턴을 종료합니다. ...... // 파일 다운로드 i ++; document.getElementById ( "cencer_bar"). style.width = i/filecount*100+"%"; // 다음 루프 that.loopid = window.settimeout (loop, 0); 7} that.loopid = window.settimeout (loop, 0);Settimeout 기능을 통해 진행률 표시 줄의 동적 효과를 달성 할 수 있습니다.
위의 기사는 JS의 DOM 요소의 속성을 동적으로 변경 한 후 페이지를 적시에 렌더링하는 문제를 빠르게 해결합니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 모든 사람들이 wulin.com을 더 지원할 수 있기를 바랍니다.