私の問題: 特定の DIV にいくつかのコンテンツをロードするこの AJAX 呼び出しが Web サイト内にあります。このコンテンツのロード中に、AJAX が要求されたコンテンツを返すまで、GIF ロード アニメーションが (JavaScript を介して) 挿入されます。
FF は JavaScript を線形の順序でロードするため、これは Firefox 内で完全に正常に動作します。一方、Chrome と IE はそのゲームをプレイしていないようです。最初にすべての AJAX を起動してから、他のすべてを処理しているようです。
知っておくと便利: 私の AJAX 呼び出しの非同期は FALSE です。はい、私は TRUE 非同期の使用を目指す必要がありますが、この場合はそのようにする必要があります。
私の目標: AJAX の読み込み中は何もできないことがわかっているので、AJAX が呼び出される前にアニメーションを挿入するコード行を実行したいと思います。setTimeout() を試しましたが、スクリプト全体が壊れてしまいます。
助言がありますか?
コードは次のとおりです。
<div id="mycolumn">
<!-- Here: Loading Animation first, then AJAX responseText -->
</div>
JavaScript 関数:
function myAjaxCall () {
// Initiate HTTP Request
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// I want this to happen BEFORE any AJAX gets executed
document.getElementById("mycolumn").innerHTML="<img src='loading.gif'>";
// AJAX Request, gets fired by Chrome and IE before anything else,
// wich prevents my img from being inserted before the response arrives
xmlhttp.open("GET","someURL",false);
xmlhttp.send(null);
// AJAX Response, replaces my Loading Animation
document.getElementById("mycolumn").innerHTML=xmlhttp.responseText;
}