JavaScript
Article

Dynamically Load jQuery Library Using Plain JavaScript

By Sam Deering

This is how you can load the jQuery library using plain JavaScript. As the load takes place asynchronously so i’ve included a callback version too so you know when the script inserted has completed and you can start using jQuery! I previously posted about inserting scripts into secure pages so there are more options for you there too.

Load jQuery library using plain JavaScript

//Load jQuery library using plain JavaScript
(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

With callback

(function () {

    function loadScript(url, callback) {

        var script = document.createElement("script")
        script.type = "text/javascript";

        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function () {
                callback();
            };
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {

         //jQuery loaded
         console.log('jquery loaded');

    });


})();
  • Pingback: Load jQuery with Google Libraries API | jQuery4u()

  • Vince

    nice script!

  • wimbledon it

    copy and paste works fine. Nice one! It even has the IE stuff in it. Thank you for sharing!

  • Andrey Miasoedov

    thanks! very useful for me.

  • F. Rick Reich

    i love you :D

  • Mike

    perfect!

  • Poodleay

    yaay!

  • sfsekaran

    This is amazing. Thank you for the simple and to-the-point snippets.

  • Edward

    Thank you very much! In 2014 still working!

  • tarekahf

    Great ! I am very happy I found this. However, there was one issue which is loading multiple scripts and they depend on each other. I have to use the model similar to the chain and use callback function to load the next script. It is working like a charm. I hope this is a good way to implement this. See below sample:

    function loadOtherScript(finalCallback) {
    function loadScript1() {
    loadScript(‘/content/isdbg/publications/6/js/jquery.calendars.js’,
    function(){
    console.log(‘scrip 1 loaded’);
    loadScript2();
    });
    }
    function loadScript2() {
    loadScript(‘/content/isdbg/publications/6/js/jquery.calendars.plus.js’,
    function(){
    console.log(‘scrip 2 loaded’);
    loadScript3();
    });
    }
    function loadScript3() {
    loadScript(‘/content/isdbg/publications/6/js/jquery.calendars.ummalqura.js’,
    function(){
    console.log(‘scrip 3 loaded’);
    loadScrip4();
    });
    }
    function loadScrip4() {
    loadScript(‘/content/isdbg/publications/6/js/IDBHijriGreg.js’,
    function(){
    console.log(‘scrip 4 loaded’);
    console.log(‘Now calling Final Callback Function’);
    finalCallback();
    });
    }
    loadScript1();
    }

    function myFinalCallBack() {
    console.log(‘Today’s date in Hijri Calendate is: ‘ +
    $.calendars.instance(‘ummalqura’).today().formatDate(‘dd/mm/yyyy’));
    PrefCycle.addHijriPerfDate(); // Lookup the Start Date / End Date of the Performance Task after it is started by the end user
    }

  • Chinmay Waghmare

    Thanks! You saved my day .. nice script :)

  • Eric Willman

    thats fantastic unless jQuery is the script you are trying to dynamically load…

  • Amgad Fahmi

    This might be a bit old topic but Just created a new components uses ES6 to load scripts dynamically in synchronous way.
    The Project details and source code are on GitHub https://github.com/amgadfahmi/scripty

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.