Loading image with $.ajax

Question

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?

@j08691 : I just want the image load while my function is running, and when function is completed, the loading image will hide. — Nothing, Oct 19 '12 at 02:47
How long does your function take to run? Because if the function is quick, it might be too short for the image to actually download. — temporalslide, Oct 19 '12 at 02:51
Use beforeSend and complete functions in ajax http://stackoverflow.com/questions/9471857/show-in-progress-during-http-request-long-running-execution-in-javascript-jq/9472172#9472172 — jd_7, Oct 19 '12 at 02:58

coderabbi · Accepted Answer · 2012-10-19T03:51:02.133

2

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.

edited Oct 19 '12 at 03:51

answered Oct 19 '12 at 02:51

coderabbi

2,261
16
18

Yesh! that's what I want. Thanks you :) – Nothing Oct 19 '12 at 02:54
It worked for me when I used `$('#imgloading').fadeOut(2000);`, but `$('#imgloading').show(500, fadeOut(2000));` is error (fadeOut is not a function). – Nothing Oct 19 '12 at 02:59
@socheata I honestly don't see why you would want to have a fade in/out effect on a loading image; if it loads within 200ms then great! :) – Ja͢ck Oct 19 '12 at 03:03
Yes, that's great for me. I just want to tell the error to avoid next time only :) – Nothing Oct 19 '12 at 03:05

score 1 · Answer 2 · answered Oct 19 '12 at 02:51

try

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

it will remove the html of the #imgloading so the image will gone

and you havent show the image

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

    <img src="/Content/Images/ImageModal/loading.gif" alt="Confirming"/>
</div>

score 1 · Answer 3 · answered Oct 19 '12 at 02:51

Looking at your code, you show the image first:

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

Then you perform the AJAX request and on success you hide it:

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

If the image doesn't seem to show at all, there could be a few "issues":

The request is synchronous, so the page doesn't get a chance to update in between.
The request is so fast that the image shows for only a very short time; you can wrap the hide() inside a setTimeout() to delay the hide and verify it's working properly, though you have proven that with the alert() as well.
Related to the previous, when you show the <div> the browser would first load the image; depending on how long that takes, by the time your request comes back it would be hidden again.

Loading image with $.ajax

3 Answers3