在AJAX調用之前加載預加載器

我正在進行AJAX調用。它是同步的，因此在內容加載時會「掛起」。 AJAX調用之前，我預加載圖像追加到即將要進入的內容的父節點：在AJAX調用之前加載預加載器

function makePreLoader(parentNode) 
{ 
    var img = document.createElement("img"); 
    img.src = "images/preloader.gif"; 
    parentNode.appendChild(img); 
} 


function getData() 
{ 
    var parentNode = document.getElementById("myParentNode"); 
    makePreloader(parentNode); 

    $.ajax( 
    "http://www.example.com/", 
    { 
     success: function(resp) 
     { 
     $(parentNode).html(resp); 
     }, 
     async: false 
    } 
); 
}

我在example.com的腳本是一個簡單的PHP腳本，掛起7秒鐘，然後回答「完成」。

當我調用'getData'時，預期的行爲是看到預加載圖像加載，然後它應該被替換爲「完成」。

實際的行爲是調用掛起（顯然沒有附加預加載器），然後加載內容。

有沒有人有類似的問題？有人可以推薦一個好的解決方案

來源

2011-12-08 KeatsKelleher

使用ajaxStart代替

這裏有一個例子如何做到這一點

https://stackoverflow.com/a/68503/413670

來源

2011-12-08 14:09:40 Rafay

沒有一個很好的解決方案，除了撥打電話異步的。根據定義，同步Ajax調用會阻止UI線程。因此，UI上的所有操作都會暫停，直到通話響應。這就是爲什麼它似乎掛起了用戶界面。

tl; dr：使用異步ajax。如果有的話，您應該進行同步呼叫的原因很少。

來源

2011-12-08 14:11:07

使用同步AJAX調用有很多原因。例如，如果您正在爲特定用戶初始化胖客戶端，並且初始化取決於特定於用戶的某些數據。另一種方法是通過使用setTimeout/return輪詢AJAX響應來延遲初始化，以重新啓動初始化的一些相關部分。這增加了顯着的複雜性，並且顯着地增加了與輪詢相關的開銷，儘管非常少（因爲您可以將超時的分辨率控制到毫秒）。 – KeatsKelleher

在AJAX調用之前加載預加載器

回答

相關問題