Question

I have tried this answer.

This is my function, I call it when I click on the image.

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

This is my html :

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

The function is in state success the alert is working, but the image is not loading.
When the alert dialog is popup, I see the loading image is loading in the background. But when I commented the alert, the image didn’t show.

Could any one tell me how could I do this?

Answer 1

The image is undoubtedly loading, it’s just hidden again so quickly that it never becomes fully visible.

Test it like this:

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

The result should be that your image appears and then fades out slowly. That’s likely not your intended behavior, but it’ll confirm that your image is indeed loading (since the alert() approach wasn’t convincing…).

You might wish to show the image for a short period of time to give the user a sense of security that something is indeed happening. In that case, I would suggest delaying hiding the image somewhat. There are numerous ways to accomplish this, but I typically do the following:

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

Since the image is already shown, the show() is redundant and acts as a simple delay.