加載動畫顯示不出來，直到Ajax調用完成後

可能重複：Same problem (unresolved)加載動畫顯示不出來，直到Ajax調用完成後

我告訴加載DOM Ajax調用之前和Ajax調用後，我隱藏它。出於某種原因，只有在ajax調用完成後纔會顯示加載圖像。其結果是，加載圖像甚至不出現，除非我把delay(#).hide(0)的代碼如下：

$("#loading-popup").show(); 
$.ajax({ 
// ajax here 
}); 
$("#loading-popup").hide(0);

我在其他的Ajax測試要求在我的網站，並出現相同的問題。有沒有人得到這個解決？我正在使用Chrome 26.

編輯：我忘了指定我正在使用同步 ajax調用。（async: false）

來源

2013-04-14 Jay Na

這取決於ajax調用是同步還是異步。

對於異步 Ajax調用，以下工作：

$("#loading-popup").show(); 
$.ajax({ 
type: 'POST', 
// other parameters 
success: function(yourdata) 
{ 
    $("#loading-popup").hide(); 
}

對於同步 Ajax調用，它不。 Ajax首先被執行，所有其他進程被阻止/排隊。

變通的辦法是使用的setTimeout這樣的：

setTimeout(function() { 
$("#loading-popup").show(); 
$.ajax({ 
type: 'POST', 
async: false, 
// other parameters 
// 
// other codes 
}); 
$("#loading-popup").hide(); 
}, 10);

但因爲它是同步的，加載GIF將無法運行動畫和剛剛成爲靜態圖像（至少對於Chrome瀏覽器是）

我猜只有兩種解決方案：
1）使用異步Ajax調用
2）使用靜態加載圖像

來源

2013-04-14 16:48:40

的ajax()是asyn功能，並在完成ajax調用之前它可能執行的語句。你必須隱藏在success或done函數中。

$("#loading-popup").show(); 
$.ajax({ 
// ajax here 
}).success(data){ 
    $("#loading-popup").hide(0); 
})

來源

2013-04-14 15:32:46 Adil

感謝您的回答。你在研究方面指出了我的正確方向。我決定發佈一個更全面的答案。 –

我知道晚了IM有點黨Ø n這個，但是爲了將來的參考，如果你想有一個加載動畫並使用同步ajax調用，並讓它在chrome中有動畫，你可以使用這個第三方ajax腳本：http://fgnass.github.io/spin.js/#！

Spin.js動態創建旋轉活動指示器，可以將其用作與AJAX加載GIF相關的獨立於分辨率的替換。

我廣泛使用它，它適用於我。

來源

2013-08-28 11:17:20

這可能是另一種方式。

var $ani = $('#loading-popup').hide(); 
$(document) 
    .ajaxStart(function() { 
    $ani.show(); 
    }) 
    .ajaxStop(function() { 
    $ani.hide(); 
    });

來源

2013-12-01 03:50:18 AtanuCSE

我不知道如果這個問題已經解決了，但試試這個：

$("#loading-popup").show(); 
$.ajax({ 
// ajax here 
success: function(data) { 
    $("#loading-popup").hide(); 
} 
});

讓我知道，如果這個工程..

來源

2014-09-20 03:41:45 rahj

加載動畫顯示不出來，直到Ajax調用完成後

回答

相關問題