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

Written by Ian Carnaghan · 31 sec read >

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

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.

Last Updated On March 21, 2018
Written by Ian Carnaghan
I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment. In my spare time I teach undergraduate classes in web development. Profile

Leave a Reply

Notify of