使用jQuery.ajax()不显示/隐藏图像Loading.gif

时间:2014-10-13 03:11:34

标签: jquery ajax asp.net-mvc

我正在尝试在我的jQuery.ajax()请求中进行显示/隐藏加载,但我有一个问题。当我多次进行ajax调用时,加载图像不会显示。 我尝试了所有的事情但没有任何作用最后我尝试使用setTimeout设置一个睡眠定时器然后稍微工作,图像显示但是当调用ajax调用时,image.gif不起作用,动画停止。 我正在使用Bootstrap 3.0.0和jQuery 2.1.1

html ...

<a href="#" id="Today" class="navbar-link">Today</a>

<div id="myLoading" class="mydiv" hidden="hidden">
    <img src="~/Content/Images/ajax-loader.gif" class="ajax-loader" />
</div>

jquery代码......

  jQuery('#Today').click(function () {
    jQuery('#myLoading').show();
    var request = jQuery.ajax({
        url: '/Home/Today',
        type: 'get',
        dataType: 'html'
    });

    request.done(function (html, status, jqXHR) {
        jQuery('#tableSection').html(html);
    });

    request.fail(function (jqXHR, status, errorThrow) {
        alert("There was a error: " + errorThrow + ", the estatus is: " + status);
    });

    request.always(function () {
        jQuery('#myLoading').hide();
    });

});

css ......

.mydiv {
       height: 400px;
       width: 700px;
       position: absolute;
       left: 20%;
       top: 25%;
}
.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; 
    margin-top: -32px;
    display: block;     
}

...谢谢

0 个答案:

没有答案