Loading JQuery with Javascript from footer

Question

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!

Bibin Velayudhan · Accepted Answer · 2012-05-14 18:32:52Z

2

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.

answered May 14, 2012 at 18:32

Bibin Velayudhan

3,1031 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dandy Over a year ago

Thanks for the reply. I've tried this before and it doesn't necessarily fix it, but it definitely has a faster load time, allowing jquery to load first. I'll be sure to keep this implemented. Thanks!

adeneo · Accepted Answer · 2012-05-14 18:54:48Z

1

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');
        });
    }
}

answered May 14, 2012 at 18:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

Dandy Over a year ago

RECURSION! Why didn't I think of that?! I'm no longer getting the error thank you! Although, this does raise a new error for me that I'm unfamiliar with. '"create" can only be used in extension processes.', is this an issue with onload and attaching events?

adeneo Over a year ago

Should'nt be, but it's hard to tell what the problem is exactly, but if it's createElement, that should work just fine in onload handlers. Also there should be some sort of timeout on the whole thing, so if jQuery for some reason does not load at all, the interval does'nt keep on going forever, on the other hand, if jQuery is needed for the site to display correctly, it does'nt really matter!

bfavaretto · Accepted Answer · 2012-05-14 18:29:11Z

0

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');
    });
});

answered May 14, 2012 at 18:29

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

1 Comment

Dandy Over a year ago

I'm trying this now, I'll need to reorganize some of the script. Thanks!

Collectives™ on Stack Overflow

Loading JQuery with Javascript from footer

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related