ansaurus

Question

How is the loading script on this website implemented?

Answer 1

+1 A:

Edit: My answer is wrong, I answered with a different context in mind. However, I'm leaving it because the info could be useful for when you need to show a loading/progress bar.

He is using: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/.

However, he is not using its full capabilities (checkout the demo at the above URL). The loading bar is just an animated gif file. I think you can get it at http://ajaxload.info.

Hope that helps. :)

Favio 2009-02-28 14:38:07

Answer 2

+2 A:

He is using jQuery's ajaxStart and ajaxStop

$("#loading").ajaxStart(function(){ 
  $(this).show(); 
});
$("#loading").ajaxStop(function(){ 
  $(this).hide(); 
});

This basically allows him to show this loading image while any asynchronous call is being made.

Ian Robinson 2009-02-28 14:40:03

Answer 3

+3 A:

If you take a look at the site using firebug, you can see that the author is using the jQuery JavaScript framework to implement the loading bar.

The relevant code, found in the http://www.cssjockey.com/wp-content/themes/cj_pro/scripts/custom.js script in the <head> section

$(window).load(function(){
$("#loading").addClass("hidden");
});
 $("#loading").ajaxStart(function(){
 $(this).show();
 });
 $("#loading").ajaxStop(function(){
 $(this).hide();
 });

where loading is the id for the div containing the loading gif image

Russ Cam 2009-02-28 14:40:08

Answer 4

+4 A:

Hi Raymond, I have written a post to take the mystery out. Check this out and implement it on your website, let me know if you need any help ;)

http://www.cssjockey.com/web-design-tutorials/an-easy-way-to-create-loading-bar

Regards,

Mohit Aneja (CJ)

www.CSSJockey.com

2009-03-03 21:59:43

ansaurus

tags:

views:

answers:

How is the loading script on this website implemented?

related questions