4

This has been asked many many times. But none of the solutions are working for me in IE and Chrome.

I basically want to show a loading image while ajax call is being made.

Following is what I'm trying.

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();
}

Following is the 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>

After above js, I tried

  • ajaxStart and ajaxStop
  • $.ajaxSetup
  • $.ajax({...}).done(hideL)

All the js codes I tried are working in Firefox but none of them are working in IE and Chrome. In Firefox, the code works as expected. Loading div gets shown, ajax is called, loading div gets hidden. This is exactly what I'm expecting. In IE & Chrome, loading div doesn't show up. Maybe It's getting shown and hidden very fast after or before ajax call.

Please let me know what can be done to make the code work in IE & Chrome.

There has to be some workaround as I've seen other sites show loading div. Or maybe I'm doing something stupid.

Once the code is working in all browsers. I want to make a generic function (like a jQuery plugin) to show a loading div when ajax is being called.

4

6 回答 6

4

试试这个：这将确保在 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();
    }​
于 2012-12-07T14:50:23.483 回答
3

这种形式以前对我有用：（我放慢了，所以如果它快的话你可以看到它）

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

这里的测试示例：

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

于 2012-12-07T15:07:55.633 回答
1

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

于 2013-06-19T12:46:29.193 回答
1

我是这样做的，如果有帮助的话试试。。

    $.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 (
于 2012-12-07T15:04:27.847 回答
1

很简单，只需在 ajax 函数中添加 async=true 即可。它将在 chrome 中工作

于 2016-03-03T09:14:52.213 回答
0

我在 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);
于 2013-07-10T10:08:48.013 回答