Question

这已被问过很多次了。但在IE和Chrome中，没有一个解决方案适合我。

我基本上想要在进行ajax调用时显示加载图像。

以下是我正在尝试的事情。

function ws(){
    showL();
    var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText;
    $('#dv').html(res);
    hideL();
    $('#complete').html('Done');
}
function showL()
{
    $('#loading').show();
}
function hideL()
{
    $('#loading').hide();
}

以下是HTML

<table cellspacing="1" cellpadding="1" border="1">
  <tr><td>
        <input type="button" value="ckick" id="btn" onClick="ws();">
        <input type="button" value="clear" onClick="$('#dv,#complete').html('');">
    </td><td>
        <div id="dv"></div>
    </td></tr><tr>
    <td>Here<div id="loading" style="display:none" >Loading.................</div></td>
    <td>final<div id="complete"></div></td></tr>
</table>

在上面的js之后，我尝试了

ajaxStart和ajaxStop
$。ajaxSetup
$。AJAX（{...}）。完成（hideL）

我尝试的所有js代码都在Firefox中运行，但它们都没有在IE和Chrome中运行。 在Firefox中，代码按预期工作。显示加载div，调用ajax，加载div被隐藏。这正是我所期待的。在IE＆amp; Chrome，加载div不会显示。也许它在ajax调用之后或之前非常快地显示和隐藏。

请让我知道可以做些什么来使代码在IE＆amp;铬。

必须有一些解决方法，因为我已经看到其他网站显示加载div。或者也许我正在做一些愚蠢的事情。

一旦代码在所有浏览器中运行。我想制作一个通用函数（比如一个jQuery插件），以便在调用ajax时显示加载div。

Answer 1

试试这个：这将确保在ajax调用完成后隐藏您的DIV

    function ws() {
        showL();
         var res ="";
        $.ajax({
            url: 'webservice.asp?service=LoadingTestSRV',
            async: true,
            cache: false,
            success: function(data) {
                res=data;
                $('#dv').html(res);
                hideL();
                $('#complete').html('Done');

            }
        });

    }

    function showL() {
        $('#loading').show();
    }

    function hideL() {
        $('#loading').hide();
    }

Answer 2

此表格之前对我有用:(我把它放得很慢所以如果速度很快就可以看到它）

$('#loading').ajaxStart(function() {
    $(this).show("slow");
}).ajaxComplete(function() {
    $(this).hide("slow");
});

此处的测试示例：

http://jsfiddle.net/MarkSchultheiss/xgFkw/

Answer 3

我这样做，试试它是否有帮助..

    $.ajax({
        beforeSend: function () {
            $('#loadingDiv').show();
            $('#accordion').hide()
        },
        complete: function () {
            $('#loadingDiv').hide();
            $('#accordion').show();
        },
        type: "GET",
        url: 
        data: shallowEncodedData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (

Answer 4

你的ajax电话有问题。从ajax调用中删除async:false，它甚至可以在IE8 / 9和Chrome中运行。对于其他迷失灵魂，请进行上述更改，然后重试。

Answer 5

简单只需在ajax函数中添加async = true。它适用于chrome

Answer 6

我在Chrome中解决此问题的方法，在AJAX调用上使用一毫秒的超时。

E.g。

$("#mySpinningLoader").show();

var t = setTimeout(function () {
    $.ajax({
        url: rootPath + controllerNAction,
        async: false,
        type: "POST",
        data: JSON.stringify(lightweightObject),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            $("#mySpinningLoader").hide();
        }
    });
}, 1);

jquery ajax加载div不能在IE＆amp;铬

6 个答案: