jQuery 페이지가로드되기 전에 HTML을 업데이트하지 않습니다.

Question

jQuery로 간단한 로딩 바를 만들고 싶습니다. 나는 순차적으로 실행하는 n 개의 아약스 요청을 가지고 있으며, 각각의 바를 업데이트하기를 원한다. 문제는 HTML이 모두 업데이트 될 때만 업데이트한다는 것입니다. 로드 할 때 특성이 변경되는 것을 볼 수 있지만 시각적 변경은 끝에 만 나타납니다. 페이지로드 중에 어떻게 표시 할 수 있습니까?

이 줄로 막대 너비를 업데이트합니다. progressDiv.attr('style', 'width: ' + perc + '%');로드하는 동안 너비가 업데이트되지만 실제 변경은 마지막에만 있습니다.

Answer 1

브라우저 엔진은 스크립트가 완료 전까지 페이지에 CSS 변경에 개최 것입니다 progressDiv.css('width', perc + '%');가

Answer 2

올바른 구문은

progressDiv.css('width', perc + '%'); 

또는

progressDiv.css({width: perc + '%'}); 

Answer 3

문제입니다 시도 . 이것은 더 나은 성능을위한 접근법입니다.

왜 그런가?

더 나은 이해를 위해 스크립트의 각 행에서 div 색을 변경하는이 예제를 참조하십시오. 관찰자 동작

$('div').css('background-color','red'); 
 
alert('now showing red!'); 
 
$('div').css('background-color','yellow'); 
 
alert('now showing yellow!'); 
 
$('div').css('background-color','green'); 
 
alert('now showing green!'); 
 
$('div').css('background-color','blue'); 
 
alert('now showing blue!');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:100px;height:100px;"></div>

당신은 스크립트가 완료 될 때까지 배경색이 변경되지 않는 것을 알 수 있습니다. 이것은 브라우저 엔진이 요소의 모든 변경 사항을 메모리에 저장하고 모든 것이 완료되면 UI를 업데이트하기 때문에 브라우저가 모든 호출에 대해 UI를 업데이트했는지 상상해보십시오. 변경 사항이 많으면 성능 문제가 발생합니다.

해결 방법은 무엇입니까? 이 예

setTimeout(function(){ 
 
$('div').css('background-color','red'); 
 
alert('now showing red!'); 
 
},0); 
 

 
setTimeout(function(){ 
 
$('div').css('background-color','yellow'); 
 
alert('now showing yellow!'); 
 
},0); 
 

 
setTimeout(function(){ 
 
$('div').css('background-color','green'); 
 
alert('now showing green!'); 
 
},0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:100px;height:100px;"></div>

에

봐는 그래서 setTimeout 내부에 기능을 포장하면 문제가 해결됩니다.

즉, setTimeout에 라인 progressDiv.attr('style', 'width: ' + perc + '%');을 입력하면 문제가 해결됩니다.

setTimeout(function(){ 
progressDiv.attr('style', 'width: ' + perc + '%'); 
},0) 

이 setTimeout(function(){},0) 작품 ... Here is more detailed explanation

희망이 도움이 이유에 대한 자세한 정보를 얻으려면.