How to Check if a Page has Loaded Using jQuery

I was working on a project and needed to include a loading gif until the page had fully loaded.  Using a couple of lines of code made this quite easy.

The site I was workign on included an IFRAME with external content.

The requirement was that a loading gif needed to be displayed until the page had fully loaded.

Using jQuery this can be achieved in a few lines of code as follows:


Line 3: we target the browser window and then use the on load even handler. 

Line 4: Once the window has loaded we hide the element with a class of 'loader'

The actual loader gif is positioned within an element further down the page as follows:

<div class='loader'>
	<img src="images/ajax-loader.gif">

That's it!

Want to Learn More?

Become a member and get access to the member only area of this site.



Your email address will not be published.

PHP for Beginners

Would you like lifetime access to the hugely successful PHP for Beginners course? Click here to find out how.

FREE Code Snippets

FREE hints and tips delivered direct to you once per month.