load jQuery library after page has initially loaded

Question

I have a case where I need to check if jQuery exists on a page and if it doesn't, I need to load it. I create a script tag and reference the external jQuery library. How do I wait for the library to be loaded on the page before I continue with the rest of the script?

UPDATE:

Heres what it looks like after Gion's suggestion:

if (typeof jQuery === 'undefined') {
    var j = document.createElement('SCRIPT');
    j.type = 'text/javascript';
    j.src = '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(j);
    j.onload = function () {
        var section = document.createElement('DIV');
        section.setAttribute('style', 'height:300px; width:250px; position: fixed; right: 0px; top: 100px;z-index: 9999; border-style:solid;border-width:1px;');
        section.innerHTML = '<p>steps</p><textarea name="steps"></textarea><p>expected results</p><textarea name="results"></textarea><p><input type="button" name="submit" value="add test case" /></p>';

        document.getElementsByTagName('body')[0].appendChild(section);
    };  
}

gion_13 · Accepted Answer · 2012-04-19 06:13:50Z

6

<script type="text/javascript">
    if(typeof jQuery === 'undefined')
        document.write('<sc'+'ript type="text/javascript" src="jquery.js"></scrip'++'t>');
    window.onload = function(){
        // jquery should be present here
    });
</script>

answered Apr 19, 2012 at 6:13

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

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

5 Comments

Rami Alshareef Over a year ago

why its '<sc'+'ript not '<script ?

gion_13 Over a year ago

to prevent the dom parser from thinking that the string '<script>' is in fact a dom tag

Sethunath K M Over a year ago

Wont it create conflict if this script execute before jquery is loaded ?

kenneth koontz Over a year ago

Thanks this works. Just out of curiosity, does it work well with all modern browsers?

gion_13 Over a year ago

@Sethunath window.onload is being triggered only after all the dom elements have been loaded (scripts,imgs,css...) so, in the worst case you'll have 2 jQuery libs loaded, the last one loaded overwriting the first. A conflict may be present only if you try to load different jquery versions and you don't know which one is loaded when you run your script.

Sethunath K M · Accepted Answer · 2012-04-19 06:13:28Z

1

You can check if the jquery is loaded like this

window.onload = function(){
    if(typeof jQuery == "undefined"){
           // jquery is not available 
    }
}

And if jquery is not loaded I would recommend using a javascript loader like requirejs http://requirejs.org/

answered Apr 19, 2012 at 6:13

Sethunath K M

4,7694 gold badges31 silver badges42 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:08:57Z

0

You may set it to window.onload

window.onload = function () { alert("It's loaded!") }

Execute Javascript When Page Has Fully Loaded

edited May 23, 2017 at 10:08

CommunityBot

11 silver badge

answered Apr 19, 2012 at 6:12

Rami Alshareef

7,19813 gold badges51 silver badges78 bronze badges

Comments

Andreyco · Accepted Answer · 2012-04-19 06:16:37Z

0

to inlcude jQuery file, ONLY if needed, you need to check it first

function afterLoad(){
  if(typeof(jQuery)!=='undefined')
    return;

  var element1 = document.createElement(“script”);
  element1.src = “pointToYourjQueryFile.js”;
  element1.type=”text/javascript”;
  document.getElementsByTagName(“head”)[0].appendChild(element1);
}

call this function on window load this way...

<body onload="afterLoad()"?>

answered Apr 19, 2012 at 6:16

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

Comments

Joseph · Accepted Answer · 2012-04-19 06:18:03Z

0

window.onload = function(){
    var script,head;
    if(!jQuery){
        script = document.createElement('script');
        document.getElementsByTagName('head')[0].appendChild(script);
        script.onload = function(){
           alert('jQuery loaded');
        }
        script.src = 'path_to_jquery';
    }
}

answered Apr 19, 2012 at 6:18

Joseph

120k31 gold badges186 silver badges238 bronze badges

Comments

Michał Miszczyszyn · Accepted Answer · 2012-04-19 06:19:28Z

Modernizr uses this line:

<script>window.jQuery || document.write('<script src="./js/libs/jquery-1.6.2.min.js"><\/script>')</script>

But document.write is regarded as unsafe. Therefore I'd connect it with what have been posted:

if(!window.jQuery)
{
    var element1 = document.createElement(“script”);
    element1.src = “somefile.js”;
    element1.type=”text/javascript”;
    document.getElementsByTagName(“head”)[0].appendChild(element1);
}

On the other hand Google uses:

(function() {
    if(window.jQuery) return;

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'some.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

Which appends the script to the first tag already existing on the website. If you have at least one <script> on you site, use this one. From what I know it's considered the best solution.

Collectives™ on Stack Overflow

load jQuery library after page has initially loaded

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related