CODEWITHSUNDEEP
jqueryajax
MayThrow
MayThrow

Reputation: 2201

Add a loading animation to jquery ajax .load()

I currently have this code and it's pretty simple

$('#window').load('http://mysite.com/mypage.php');

But it shows the content only after fully loaded and during that duration the #windows element remains empty. I want to show a loading image until the page loads. How should i do it? The jquery site explains nothing about it. (afaik)

Upvotes: 16

Views: 68093

Answers (5)

Claytronicon
Claytronicon

Reputation: 1456

The jQuery load() method has a callback where you can get the xhr status. Using the spin.js loader (or any other load indicator), you can show, then hide when the .load() is complete. Note: this example will give a 404 since the file loaded does not exist, but the spinner load indicator works just the same.

 // create gloabal page spinner for loading stuff
 var opts = {
   lines: 13, // The number of lines to draw,
   length: 12, // The length of each line
   width: 4, // The line thickness
   radius: 15, // The radius of the inner circle
   scale: .5, // Scales overall size of the spinner
   corners: 1, // Corner roundness (0..1)
   color: '#000', // #rgb or #rrggbb or array of colors
   opacity: 0.25, // Opacity of the lines
   rotate: 0, // The rotation offset
   direction: 1, // 1: clockwise, -1: counterclockwise
   speed: 1, // Rounds per second
   trail: 60, // Afterglow percentage
   fps: 20, // Frames per second when using setTimeout() as a fallback for CSS
   zIndex: 2e9, // The z-index (defaults to 2000000000)
   className: 'spinner', // The CSS class to assign to the spinner
   top: '50%', // Top position relative to parent
   left: '50%', // Left position relative to parent
   shadow: false, // Whether to render a shadow
   hwaccel: false, // Whether to use hardware acceleration
   position: 'absolute', // Element positioning
 }
 var spinner = new Spinner(opts).spin();
 var target = $("#loader").append(spinner.el);

 $("#result").load("ajax/test.html", function(response, status, xhr) {
   if (status == "error") {
     var msg = "Sorry but there was an error: ";
     $("#result").html(msg + xhr.status + " " + xhr.statusText);
   }
   // remove loader
   $("#loader").empty();
 });
<script src="http://fgnass.github.io/spin.js/spin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
</div>
<div id="result">
</div>

Upvotes: 0

daxyonis
daxyonis

Reputation: 41

1) Go to cssload.net and configure a spinner with shape, colors, speed and size. Download the code.

2) Put the style code into a css file

3) Put the div code into your html file, such as:

<div id="loadingDiv">
        Please wait...
        <div id="spinnerDiv">
            <div id="blockG_1" class="facebook_blockG">
            </div>
            <div id="blockG_2" class="facebook_blockG">
            </div>
            <div id="blockG_3" class="facebook_blockG">
            </div>
        </div>
    </div>

where the #spinnerDiv is the actual div from cssload.

4) In a js file, add the following jquery lines:

//*******************************
    // Loading div animation
    $(document).ajaxStart(function(){
          $("#loadingDiv").css("display","block");
        });
        $(document).ajaxComplete(function(){
          $("#loadingDiv").css("display","none");
        });

the ajaxStart is called whenever an ajax call starts; the ajaxComplete is called when the same call is completed.

5) If you do not want to see the spinner when the page is first loaded, make sure to add the following in your css file:

#loadingDiv{
display:none;
}

Upvotes: 4

BLSully
BLSully

Reputation: 5929

For async requests that I know have the potential to take more than a few milliseconds, I use Spin.js It does not have any external dependencies, and is cross-browser compatible

var opts = {
  lines: 13, // The number of lines to draw
  length: 10, // The length of each line
  width: 4, // The line thickness
  radius: 11, // The radius of the inner circle
  rotate: 0, // The rotation offset
  color: '#000', // #rgb or #rrggbb
  speed: 0.6, // Rounds per second
  trail: 32, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};

var target, spinner;

$(function(){
    target = $('#window').get(0);
    spinner = new Spinner(opts);
    spinner.spin(target);
    setTimeout(function(){
        spinner.stop();
        $(target).html("Loading finished.");
    }, 3500);
});

see fiddle http://jsfiddle.net/y75Tp/73/ (update thanks to verbumSapienti)

Upvotes: 3

Rakesh Juyal
Rakesh Juyal

Reputation: 36749

Create a loading div first.

 <div id='loadingDiv'>
    Please wait...  <img src='path to your super fancy spinner' />
 </div>

Hide this DIV initially and attach the code to show this div when ajaxCall starts and hide this when ajax call completes. 

$('#loadingDiv').hide().ajaxStart( function() {
$(this).show();  // show Loading Div
} ).ajaxStop ( function(){
$(this).hide(); // hide loading div
});

Edit
There was some issue in SO formatting tags a while back. Added those again.

Upvotes: 20

user1432124
user1432124

Reputation:

For this purpose you have to use a gif image. First of all change the html of #window to gif image until the content is loaded

Working Code

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php');

Upvotes: 7

Related Questions