Home JQuery How to add a preloader when using the JQuery ajax load method?
 
 
 

How to add a preloader when using the JQuery ajax load method?

PDF Print E-mail

Question : How to add a preloader when using the JQuery Ajax load method?

Answer:

Usually there will be a div tag with an ID in which you will load the content.

Example: <div id="load"></div>

Now in order to have a preloader displayed while the content is busy loading we need to include the following code within the function used to load the content.

function load(){
        //This is the function that loads the preloader
        $('#load').html('<img src="/images/ajax-loader.gif " />');

        //This is the load function that loads the actual content and replaces the loader with the content
       $('#load').load('content.php');
}

The preloader will load first into the div tag once the function has been called. In the meantime the content will load and once the content has been loaded it will replace the preloader with the content.

NOTE: To find cool Ajax preloaders visit Ajaxload by clicking here.

+/-
  • silver - works like a charm!
    Many thanks! this is what I exactly need in my app! :)
  • TechPortal - I'm glad this was helpful
    There are a lot of other methods as well, but this one I found to be the
    easiest.



    There's another site where you could download preloader namely http://www.preloaders.net
  • TechPortal - @Haseeb
    Of course you can.
+/- Write comment
Your Contact Details:
Comment:
[b] [i] [u] [url] [quote] [code] [img]   
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
Security Please input the anti-spam code that you can read in the image.
 

Go Daddy $7.49 .com Sale!