XMLHttpRequest 중에 Chrome의 로드 표시기가 계속 회전합니다.
웹 페이지를 최신 상태로 유지하기 위해 Comet/Long Polling을 사용하는 AJAX 웹 앱을 작성 중인데 Chrome에서는 페이지가 항상 로드되는 것처럼 처리됩니다(탭의 아이콘은 계속 회전합니다).
Google Chrome + Ajax의 경우 Google Wave에서도 정상이라고 생각했습니다.
오늘 Google Wave가 로딩 아이콘을 계속 돌리지 않는다는 것을 알게 되었습니다만, 이 문제를 어떻게 해결했는지 아는 사람이 있습니까?
여기 내 에이잭스 전화 번호야
var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('GET', myURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
updatePage(xmlHttpReq.responseText);
}
}
xmlHttpReq.send(null);
나는 뻔뻔스럽게도 올레그의 테스트 케이스를 훔쳐 롱폴링을 시뮬레이션하기 위해 약간 조정했다.
load.html:
<!DOCTYPE html>
<head>
<title>Demonstration of the jQery.load problem</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function() {
$('#main').load("test.php");
});
</script>
</head>
<body>
<div id='main'></div>
</body>
</html>
test.php:
<?php
sleep(5);
?>
<b>OK!</b>
결과는 흥미롭습니다. Firefox 및 Opera에서는 XMLHTTPRueest 중에 로딩 인디케이터가 표시되지 않습니다.크롬이 돌게 하고...Google Wave는 더 이상 긴 폴링을 사용하지 않는 것 같습니다(예를 들어 리소스를 절약하기 위해 X초마다 폴링합니다). 하지만 계정이 없기 때문에 테스트할 수 없습니다.
EDIT: 로딩에 약간의 지연이 더해진 후에 알게 되었습니다.test.php로딩 인디케이터는, 가능한 한 작게 할 수 있습니다.로드 인디케이터는,load.html이 로드되었습니다.
jQuery(document).ready(function() {
setTimeout(function () {
$('#main').load("test.php");
}, 0);
});
다른 답변의 코멘트에서 확인되었듯이, 브라우저가 페이지 렌더링을 완료하도록 제어하면 표시기의 회전이 멈춥니다.또 다른 장점은 를 눌러 요청을 중단할 수 없다는 것입니다.
일반적인 답변으로 죄송합니다.브라우저에 의존하지 않는 프로그램을 사용하고 싶다면 낮은 수준의 XMLHttpRequest 및 ActiveXObject("Microsoft") 대신 jQuery 또는 기타 즐겨찾는 라이브러리를 사용하십시오.XMLHTTP')를 참조해 주세요.
편집: 매우 간단한 HTML 파일 test.htm과 load.htm을 작성하여 웹 사이트의 동일한 디렉토리에 저장합니다(이 URL을 사용해 보십시오.http://www.ok-soft-gmbh.com/jQuery/load/load.htm)).당신이 질문에서 설명한 효과를 볼 수 없습니다.이 파일을 예시와 비교하면 문제를 해결할 수 있습니다.
load.htm:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
<title>Demonstration of the jQery.load problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#main').load("test.htm");
});
</script>
</head>
<body>
<div id='main'></div>
</body>
</html>
test.htm:
<b>OK!</b>
jQuery나 Ajax는 잘 모르겠지만, 스니펫 매니저를 사용하여 Ace Editor에 스니펫을 삽입하는 것과 같은 문제가 있었습니다.페이지를 로드할 때 바로 에디터에 코드를 삽입하면 페이지가 로드되지 않고 탭 아이콘이 계속 회전합니다. .setTimeout()이치노페이지가 매우 빠르게 로드될 때는 작동하지만, 페이지가 더 느리게 로드될 때는 작동하지 않습니다.은 아마 가 아무것도일 것이다.$(document).ready()문서 본문 끝에 있는 코드를 호출했을 뿐입니다.
다음은 영원히 회전하는 탭 아이콘의 문제에 대해 찾은 no-jQuery 솔루션입니다.
var tillPageLoaded = setInterval(function() {
if( document.readyState === 'complete' ) {
clearInterval(tillPageLoaded);
// load whatever
}
}, 5);
경우에는 ★★★★★★★★★★★★★★★★★★★★★★★★★.// load whatever
ace.config.loadModule('ace/ext/language_tools', function () {
myEditorInstance.insertSnippet( 'some string' );
});
이 기능을 사용하다
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
};
};
};
return xhr;
};
언급URL : https://stackoverflow.com/questions/2703861/chromes-loading-indicator-keeps-spinning-during-xmlhttprequest
'programing' 카테고리의 다른 글
| 언어 WPML 숨기기 (0) | 2023.02.14 |
|---|---|
| 중력 형태 - 다중 사이트용 전역 형태 (0) | 2023.02.14 |
| 데이터를 요청 페이로드가 아닌 폼 데이터로 게시하려면 어떻게 해야 합니까? (0) | 2023.02.14 |
| componentWillReceiveProps 라이프 사이클 메서드를 사용하는 경우 (0) | 2023.02.14 |
| 안심 - 응답 JSON을 목록으로 역직렬화 (0) | 2023.02.10 |