How to Check if a Page has Loaded Using jQuery

jquery logo.png

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:

That’s it!