CODEWITHSUNDEEP
javascriptjquery
user1471980
user1471980

Reputation: 10636

how do you make ajax loading image animate on the browser

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?

Upvotes: 0

Views: 140

Answers (2)

XCS
XCS

Reputation: 28147

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.

Upvotes: 1

Anton Belev
Anton Belev

Reputation: 13543

<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.

Upvotes: 0

Related Questions