how do you make ajax loading image animate on the browser

Question

I need to show a ajax loading image while the whole page is loading.

This the html:

<div id="loading">
  <img  src="images/ajax_loader.gif" >
</div>

this is the script:

<script type="text/javascript">
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

for some reason, when I load the page, I dont see the animation. I do see the image, any ideas what might be wrong here?

First - ajax has nothing to do with it, you probably meant to say `jQuery`. Second, did you include jQuery Plugin in your code ? You can also use chrome - click F12 and check the console tab for errors. — Nir Alfasi, Jul 12 '13 at 18:49
Depends... what are you actually loading? Are you loading data (images, files, etc...) or doing javasript processing? — XCS, Jul 12 '13 at 18:53
@alfasin, I include the jquery library, is there plugin for image loading? — user1471980, Jul 12 '13 at 18:57

score 1 · Accepted Answer · answered Jul 12 '13 at 19:00

You usually see the image, but not the image if the whole page is "freezed".

This usually happens when in your actual loading you are doing javascript processing, processing which pauses the browser rendering until finished.

You can avoid this by using HTML5 web workers, which provides non-blocking processing, and actually has multi-threading capabilities.

From Wikipedia page: ..is a JavaScript script executed from an HTML page that runs in the background, independently of other user-interface scripts that may also have been executed from the same HTML page.

I can't know if this is really your problem unless you show us a fiddle.

it works on jsfiddle. Yes, I do have bunch of java script on the page that are processing data before it loads. — user1471980, Jul 12 '13 at 19:04

score 0 · Answer 2 · edited May 23 '17 at 12:05

<div id="LoadingImage" style="display: none">
 <img src.... />
</div>

 function ajaxCall()
 {
    $("#LoadingImage").show();

      $.ajax({ 
      type: "GET", 
      url: surl, 
      dataType: "jsonp", 
      cache : false, 
      jsonp : "onJSONPLoad", 
      jsonpCallback: "newarticlescallback", 
      crossDomain: "true", 
      success: function(response) { 
        $.("#LoadingImage").hide();
        alert("Success"); 
      }, 
      error: function (xhr, status) {  
        $.("#LoadingImage").hide();
        alert('Unknown error ' + status); 
      }    
   });  
 }

Reference 1 here.

Note you have to include JQuery.

Another good approach:

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Reference 2 here.

how do you make ajax loading image animate on the browser

2 Answers2