Display an animation while loading a page using JQuery

Question

I have a page that takes information from a database. It exports a lot of information, so it takes a few seconds to load. I do have an animation, but it is not behaving how I want it to behave. When a user clicks on a link, I want there to be a loading animation instantly, and it shows until the data on the page actually loads.

Here is what it actually does: When I click on a link, I wait 5 seconds, then the page loads with the animation, then the data loads. The problem is that I want the animation to run instantly, not wait 5 seconds, then run for half a second, then the data loads.

Here is my current JQuery code:

$(document).ready(function() {
  $("#content").hide();
  $(window).load(function() {
    $("#content").show();
    $("#content-loading").hide();
  })
})

content is the content that takes a while to load and content-loading has the loading animation.

DSKrepps · Accepted Answer · 2011-07-12 00:59:53Z

3

$(document).ready() will only run when the DOM is done downloading, basically when </html> is downloaded at the end of your page. If your database data is part of the page, it will be loaded by the time the DOM ready event fires. Meanwhile, $(window).load() will fire when all the resources on the page have loaded; all the images, external stylesheets, etc.

Perhaps you could have a stylesheet before the data which hides the content, then an internal stylesheet at the bottom of your page, after the data, which makes the content display and the #content-loading element hidden?

Otherwise, you could load the data asynchronously in some way, with AJAX or in a frame.

answered Jul 12, 2011 at 0:59

DSKrepps

6411 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lex Nguyen · Accepted Answer · 2013-12-03 06:56:33Z

1

http://fgnass.github.io/spin.js/

See this, if you want to add a loading.....

answered Dec 3, 2013 at 6:56

Lex Nguyen

40111 silver badges23 bronze badges

Comments

Ian · Accepted Answer · 2011-07-12 00:34:58Z

0

your animation won't run until the whole page is loaded (including all that db stuff). Instead, load a page that has just your animation, and an AJAX call to the db data. Then the db call is asynchronous.

answered Jul 12, 2011 at 0:34

Ian

2,1181 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

Display an animation while loading a page using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related