在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调用之前加载预加载器

回答

相关问题