$(document).ready() in a bundled script

Question

I've been doing a lot with web optimization recently, and I've come across an interesting problem. I was wondering if anyone might know of an existing solution.

Say you have multiple, page specific external .js files, each with it's own page specific $(document).ready() function. Say the document ready function for page 1 applies a style to every <li> in the body, while the document ready in page 2 only styles <input type="button" />s. Just a simple example.

Now say you bundle these 2 scripts, along with all your library scripts, to reduce the number of http requests on page load. Now, both document ready's will fire, and the li's on page 2 will be formatted with the code meant only for page 1.

My question is this - Is there a way through either jQuery or a third party library to assign a specific document ready to a specific page but still have them all bundled into one .js file?

Answer 1

I think you can use jQuery(document).ready() - Wait Until Exists

Answer 2

You should bundle your scripts according to your pages.

Lets say your homepage needs jquery, and some custom scripts. Bundle them together and reference this bundle.

For other pages like the profile page you bundle required scripts and reference it.