0

我试过这个答案

这是我的功能,当我单击图像时调用它。

function CheckOut(urlCheckoutNew,urlWebService) {
  var inputData = JSON.stringify(getQuotation(urlCheckoutNew));
  $('#imgloading').show();
  $.ajax({
    type: 'POST',
    url: urlWebService,
    contentType: 'application/json',
    processData: false,
    dataType: 'json',
    data: inputData,
    success: function (dataQuote) {
        //alert(1);
        $('#imgloading').hide();
    }
  });
}

这是我的html:

<div id="imgloading" style="display:none;">
    <img src="/Content/Images/ImageModal/loading.gif" alt="Confirming"/>
</div>

该功能处于success警报正在工作的状态,但图像未加载。当弹出警报对话框时,我看到加载图像正在后台加载。但是当我评论警报时,图像没有显示。

谁能告诉我我该怎么做?

4

3 回答 3

2

毫无疑问,图像正在加载,它只是再次隐藏得如此之快,以至于它永远不会完全可见。

像这样测试它:

$.ajax({
    type: 'POST',
    url: urlWebService,
    contentType: 'application/json',
    processData: false,
    dataType: 'json',
    data: inputData,
    success: function (dataQuote) {
        $('#imgloading').fadeOut(2000);
    }
});

结果应该是您的图像出现然后慢慢淡出。这可能不是您的预期行为,但它会确认您的图像确实正在加载(因为该alert()方法并不令人信服......)。

您可能希望在短时间内显示图像,以使用户有一种安全感,即确实发生了某些事情。在这种情况下,我建议稍微延迟隐藏图像。有很多方法可以做到这一点,但我通常会执行以下操作:

success: function (dataQuote) {
    var $image = $('#imgloading')
    $image.show(500, $image.fadeOut(2000));
}

由于图像已经显示,因此show()是多余的并且充当简单的延迟。

于 2012-10-19T02:51:08.307 回答
1

尝试

$('#imgloading').html('');

它将删除 html,#imgloading因此图像将消失

你还没有显示图像

<div id="imgloading" style="display:none;">
                              ^^^^^^^^^^^-------its hidden already 

    <img src="/Content/Images/ImageModal/loading.gif" alt="Confirming"/>
</div>
于 2012-10-19T02:51:19.460 回答
1

查看您的代码,您首先显示图像:

$('#imgloading').show();

然后执行 AJAX 请求,成功后隐藏它:

$('#imgloading').hide();

如果图像似乎根本没有显示,则可能存在一些“问题”:

  1. 请求是同步的,因此页面没有机会在两者之间进行更新。

  2. 请求如此之快,以至于图像只显示了很短的时间;您可以将hide()内部包裹起来setTimeout()以延迟隐藏并验证它是否正常工作,尽管您也已经证明了这alert()一点。

  3. 与前文相关的是,当你显示<div>浏览器时,首先会加载图片;根据需要多长时间,当您的请求返回时,它将再次被隐藏。

于 2012-10-19T02:51:37.500 回答