jquery ajax 加载 div 在 IE 和 Chrome 中不起作用

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({...}).done(hideL)

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

请告诉我如何使代码在 IE 和 Chrome 中运行。

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

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

Answer 1

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

    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 调用上使用一毫秒的超时时间。

例如

$("#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);