CODEWITHSUNDEEP
javascriptjquery
Dandy
Dandy

Reputation: 861

Loading JQuery with Javascript from footer

If you would like to get to the point, here is my question: Is there any way to call a specific script to load first in javascript?

For more detail, please read below:

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

What I need to do is add a JQuery lightbox plugin.

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.

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

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

Here is some of my javascript file.

//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();  
}

Any help is appreciated!

Upvotes: 0

Views: 1855

Answers (3)

adeneo
adeneo

Reputation: 318342

Using $(function() {...do your stuff here...}); is the way to go to be sure jQuery is loaded before the script is executed, but you could probably make it harder for yourself and do:

thebody.onload = function() {
   RunMyjQuery();
}

function RunMyjQuery() {
    if (typeof $ === 'undefined') {
         setTimeout(RunMyjQuery, 500);
    }else{
        $('#lightbox').ready(function() {
            $("#lightbox").fancybox().trigger('click');
        });
    }
}

Upvotes: 1

Bibin Velayudhan
Bibin Velayudhan

Reputation: 3103

Try this. Add this piece of code inside your javascript file which is called from your footer.

<script type="text/javascript">

if(typeof jQuery == 'undefined'){
        document.write('<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></'+'script>');
  }

</script>

This will include jquery if its not loaded. I think this will fix your issue.

Upvotes: 2

bfavaretto
bfavaretto

Reputation: 71939

You're calling thescripts immediately, although you try not to. Use this:

jquery.onload = thescripts; // notice no parentheses

Also, your thebody.onload strategy will not work. Use $(document).ready instead:

$(document).ready(function{
    $('#lightbox').ready(function() {
        $("#lightbox").fancybox().trigger('click');
    });
});

Upvotes: 0

Related Questions