Delay a function until $ becomes available

Question

Yahoo suggests to load scripts at the bottom of an HTML pages for performance reasons. I use HTML5 Boilerplate, which honour the rule.

The problem with this approach is that jQuery is loaded at the bottom, too. If for some reason I need to write inline javascript containing jQuery code I can't, because $ is not yet available in the namespace.

This happens for example with galleria.js (jQuery image gallery engine), which requires this markup:

<div id="gallery">
    <img src="/media/img1.png" />
    <img src="/media/img2.png" />
</div>

<script>
$('#gallery').css('height', '200px'); // this is required for galleria to work
Galleria.run('#gallery');
</script>

The code to set the height of #gallery doesn't work because jQuery gets loaded later. Firebug console gives:

ReferenceError: $ is not defined

Any hint to posticipate the execution of <script> block until the $ symbol can be found in the namespace?

There's no point having inline script at the top or in the middle that waits for something at the bottom to load - move the inline script to just below where you include jQuery. If I can make a sweeping generalisation, you shouldn't need inline script in the middle of the page unless it does something that can't wait for the page to load (e.g., `document.write()`). — nnnnnn, Jul 31 '12 at 01:51

Brad Koch · Answer 1 · 2012-07-31T01:47:31.973

5

Leave your jQuery <script> tag at the bottom, and move the Galleria <script> just below that.

<script type="text/javascript" src="jquery.js"></script>
<script>
$('#gallery').css('height', '200px'); // this is required for galleria to work
Galleria.run('#gallery');
</script>

edited Jul 31 '12 at 01:47

answered Jul 31 '12 at 01:40

Brad Koch

19,267
19
110
137

score 1 · Answer 2 · answered Jul 31 '12 at 01:36

1

You could wrap your scripts in functions and call them from within a script that is run after jQuery is loaded.

answered Jul 31 '12 at 01:36

secretformula

6,414
3
33
56

ExceptionLimeCat · Answer 3 · 2012-07-31T01:59:53.583

1

You could create your own 'Ready checker'.

 <script>
    var id = window.setInterval(function(){

         if(document.readyState != 'complete') return;

         //onload code here

         window.clearInterval(id);
    }, 10); 
 </script>

This way you can wait until the document is ready and jQuery is loaded even if its at the bottom of the document.

edited Jul 31 '12 at 01:59

answered Jul 31 '12 at 01:49

ExceptionLimeCat

6,191
6
44
77

1

Wouldn't it be easier to just put the "code here" code in a function and call that function from a jQuery `$(document).ready()` handler defined at the bottom? – nnnnnn Jul 31 '12 at 01:52
Wouldn't that throw a `illegal token $`? if jQuery wasn't loaded yet – ExceptionLimeCat Jul 31 '12 at 01:55
Oh I see. Have that call below or in the same script tag that you have the jQuery reference. Yeah that'd probably be easier. – ExceptionLimeCat Jul 31 '12 at 01:57
I know jQuery can be slow. Is this method 'quicker' or would jQuery be faster? – ExceptionLimeCat Jul 31 '12 at 01:59
Yea I get that. I was just asking your opinion. – ExceptionLimeCat Jul 31 '12 at 02:16

score 0 · Answer 4 · answered Jul 31 '12 at 01:39

0

If you can, just place jQuery in the HEAD. This is acceptable as it is a very common library. However, other than obviously moving the script block to come after the jquery script include, you pretty much have one option -- use window.setTimeout(function(){ ... jQuery code ... }, 2000); ... the aforementioned, in my opinion, is a band-aid... not a best practice.

Please note: this is completely unreliable since we're "guessing" the user will have jQuery loaded within two seconds... of course, you can make the timeout longer. But, everything from the speed (/age) and bandwidth of the user will affect the timing. It is unpredictable.

answered Jul 31 '12 at 01:39

Joe Johnson

1,814
16
20

2

I just wouldn't use setTimeout in the first place. I wouldn't rely on something that's "completely unreliable". – Brad Koch Jul 31 '12 at 01:42
Agreed... but, sometimes you don't have a choice (if you don't have access to edit the entire code-base, especially in large development environments). Again, it was meant as a band-aid... and a last resort. – Joe Johnson Jul 31 '12 at 18:37

Delay a function until $ becomes available

4 Answers4