Wait until Jquery library has loaded before executing external javascript files

Question

Is there a way to wait until the jquery library has loaded until we execute other external javascript files, so wait for this to completely load:

<script type="text/javascript"  src="jquery-1.7.2.js"></script>

then load other files such as:

<script type="text/javascript"  src="campaign_winter_2013/bg_outerwear/js/main.js"></script>
<script type="text/javascript"  src="campaign_winter_2013/bg_outerwear/js/mousePosSlide.js"></script>

The problem being I am integrating code in a platform and the jquery library is loaded before my scripts.

usually it is enough to just embed the jquery script first then add others. is this your question? — Alex
– Alex, Commented Oct 24, 2013 at 10:41
It does that automagically all by itself unless you use async or defer. Maybe what you're really trying to do is wait for the DOM to be ready, and if so, that would be jQuery's document ready method ? — adeneo
– adeneo, Commented Oct 24, 2013 at 10:44

DavidW · Accepted Answer · 2016-02-26 17:48:20Z

6

You can load jquery library first and then invoke methods defined in your JS files. The following code worked for me.

<body> 

function loadJQuery(){

var waitForLoad = function () {
    if (typeof jQuery != "undefined") {
        console.log("jquery loaded..");
        // invoke any methods defined in your JS files to begin execution       
    } else {
        console.log("jquery not loaded..");
        window.setTimeout(waitForLoad, 500);
    }
 };
 window.setTimeout(waitForLoad, 500);   
}

window.onload = loadJQuery;

</body>

edited Feb 26, 2016 at 17:48

DavidW

1254 bronze badges

answered Sep 23, 2014 at 17:31

Vikas

4,3411 gold badge37 silver badges39 bronze badges

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

Comments

Arnold Roa · Accepted Answer · 2016-01-07 15:01:23Z

Check this:

https://jsfiddle.net/neohunter/ey2pqt5z/

It will create a fake jQuery object, that allows you to use the onload methods of jquery, and they will be executed as soon as jquery is loaded.

It's not perfect.

// This have to be on <HEAD> preferibly inline
var delayed_jquery = [];
jQuery = function() {
  if (typeof arguments[0] == "function") {
    jQuery(document).ready(arguments[0]);
  } else {
    return {
      ready: function(fn) {
        console.log("registering function");
        delayed_jquery.push(fn);
      }
    }
  }
};
$ = jQuery;
var waitForLoad = function() {
  if (typeof jQuery.fn != "undefined") {
    console.log("jquery loaded!!!");
    for (k in delayed_jquery) {
      delayed_jquery[k]();
    }
  } else {
    console.log("jquery not loaded..");
    window.setTimeout(waitForLoad, 500);
  }
};
window.setTimeout(waitForLoad, 500);
// end



// now lets use jQuery (the fake version)
jQuery(document).ready(function() {
  alert('Jquery now exists!');
});

jQuery(function() {
  alert('Jquery now exists, this is using an alternative call');
})

// And lets load the real jquery after 3 seconds..
window.setTimeout(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);
}, 3000);

Collectives™ on Stack Overflow

Wait until Jquery library has loaded before executing external javascript files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related