代碼執行時加載gif「凍結」

我正在追加一個加載欄的動畫gif。該GIF早在代碼中定義的，然後我只是做了以下..代碼執行時加載gif「凍結」

document.getElementById("loading").style.display = "inline"; 
//some if statements. 
do_ajax(params);

AJAX調用看起來像......

var uri = getURL(params); 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST",uri,false); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); 
    xhr.send(null);

，顯示加載GIF。然後我執行一些檢查（如果語句），然後執行AJAX請求。然而，當所有這些代碼正在執行時gif會凍結，並且只有代碼執行完後纔會開始「移動」。爲什麼是這樣？我如何解決這個問題？

我正在使用Chrome 11

來源

2011-05-16 Skizit

是什麼瀏覽器，你使用和什麼版本？（錯誤地猜出答案：Internet Explorer，所有版本（可能除外9）） – Kobi 2011-05-16 09:20:18

它是一個阻塞的AJAX調用？也許你應該發佈整個代碼。 – Spoike 2011-05-16 09:20:46

我已經發布了涉及的AJAX代碼。 – Skizit 2011-05-16 09:23:43

您正在使用同步XHR。這將鎖定瀏覽器，同時等待請求完成。顯然，它會導致嚴重的用戶界面問題。

嘗試異步。將open()的第三個參數設置爲true。您還需要指定readystatechange事件並聆聽成功。

Further Reading。

來源

2011-05-16 09:26:25 alex

當您的同步ajax請求正在運行時，您是否希望看到loading.gif？

同步ajax請求完全鎖定了大多數瀏覽器的用戶界面，從而防止您在顯示請求前完成的任何更改。

如果你想看到loading.gif的請求正在運行時，使異步：

//--- js code 

document.getElementById("loading").style.display = "inline"; 

//--- js code 

var uri = getURL(params); 
xmlhttp.open("POST", uri, true); 
xmlhttp.onreadystatechange = handleReadyStateChange; 
xmlhttp.send(null); 
function handleReadyStateChange() { 
    if (xmlhttp.readyState == 4) { 
     // Request Complete 
    } 
}

來源

2011-05-16 09:28:12

我猜只是確保你使用的是異步：真

$("#wait").show(); //SHOW WAIT IMG 

    $.ajax({ 
     url: 'process.php', //server script to process data 
     type: 'POST', 
     async: true, // <<<<< MAKE SURE IT'S TRUE 
     data: { data1: "y", data2: "m", data3: "x" }, 
     complete: function() { 
      $("#wait").hide(); 
     },   

     success: function(result) { 
      //do something 
     } 
    });

來源

2012-09-06 00:40:12 Khalid

我使用google圖表的示例代碼，它有'async：false'，對我造成這個問題。謝謝！ – Jeff 2015-02-26 23:43:16

代碼執行時加載gif「凍結」

回答

相關問題