Loading JQuery with Javascript from footer
<p><strong>If you would like to get to the point, here is my question:</strong> 
Is there any way to call a specific script to load first in javascript?</p>

<p><strong>For more detail, please read below:</strong></p>

<p>I have a javascript file that is loading from the bottom of my HTML <code>&lt;body&gt;</code>. Unfortunately, there is no JQuery in the head, so I have to add it through this javascript file.</p>

<p>What I need to do is add a JQuery lightbox plugin. </p>

<p>My problem is that when I load the page, sometimes JQuery isn't the first thing loaded. So I receive the error "jQuery is not defined". Which will then raise more errors for undefined methods from the plugin.</p>

<p>This doesn't happen all the time, only sometimes. Which makes me think it's a loading/order of operations issue.</p>

<p>Is there any way I can guarantee that my JQuery script is the first thing loaded?</p>

<p>Here is some of my javascript file.</p>

<pre><code>//Get head element
var head = document.getElementsByTagName("head")[0];

//Create and insert JQuery
var jquery = document.createElement('script');
jquery.type = 'text/javascript';
jquery.src = 'http://image.iloqal.com/lib/fe6b/m/1/jquery.1.7.2.js';

head.insertBefore(jquery,head.childNodes[4]);

function thescripts() { 

    var fancybox = document.createElement('script');
    fancybox.type = 'text/javascript';
    fancybox.src = 'http://image.iloqal.com/ilejquery.fancybox-1.3.4.pack.js';
    head.appendChild(fancybox);

    var thebody = document.getElementsByTagName('body')[0];

    thebody.appendChild(thediv);
    thediv.appendChild(theimg);


    //Run fancybox
    thebody.onload = function() {

    $('#lightbox').ready(function() {
        $("#lightbox").fancybox().trigger('click');
    });
}
};
 if(jquery.attachEvent){
     jquery.attachEvent("onload",thescripts());
} else {
     jquery.onload = thescripts();  
}
</code></pre>

<p>Any help is appreciated!</p>
