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:

<script>
	$(function(){
		$(window).on('load',function(){
			$('.loader').hide();
		});
	});
</script>

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">
</div>

That's it!

Want to Learn More?

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

Comments

Your email address will not be published.

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.