Ultimate Web Tips
your Wordpress, jQuery, PHP, MySQL, Linux and CSS guide to a successful website
Read more:

March 30th, 2011

jQuery $(document).ready() performance and benefits

jQuery, by Joakim Ling.

This is probably the first thing to learn about jQuery. Everything inside the $(document).ready() function will execute as soon as the DOM is registered by the browser and before the page contents are loaded. So if you want an event to work, call it inside this handler.

This means that everything you stick inside the brackets is ready to go at the earliest possible moment, which allows hiding and showing effects and other dynamic functionality when the user sees the page elements.

<script type="text/javascript">
$(document).ready(function () {
	alert("DOM is loaded");	
});
</script>

Performance issues

That sounds like a dream for every web designer but it’s not always optimal to use. If you have external plugins that may timeout from time to time. The document ready event may not fire until targeted elements are visible.

To get a more responsive UI, use the .live() handler. However, be careful as this is a wasteful performance drag when there are hundreds of elements targeted. The event delegation registers very quickly and works exactly the same as if you had waited until the ready event.

<script type="text/javascript">
	$('A').live('click'), function() {
		alert('Click');
	});
</script>

Ajax Form Pro

Create professional secure forms with captcha, realtime validation and php backend. Read more

Back Top

Club World Casinos