How start executing code when the script loading is completed

Question

I have this code:

$(document).ready(function() {
    window.addEventListener('DOMContentLoaded', function() {
    var s = d.createElement('script');
    s.async = false;
    s.src = 'file.js';
    s.id = 'script';
    d.body.appendChild(s);
    });
});

$(window).load(function() {
    workwithvariablesInfilejs();
});

It seems that the document.ready fires first and window.load fires after. But if try to access the variables of the file.js I have troubles because it seems that the file.js script loads after window.load. How can I wait until the file.js is loaded ? Or is there a better way to organize this code?

Answer 1

you could use the getscript method: http://api.jquery.com/jQuery.getScript/ then make the "workwithvariablesInfilejs()" call inside the ".done" callback.

$.getScript("file.js")
.done(function(script, textStatus) {
  console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
  $( "div.log" ).text( "Triggered ajaxError handler." );
});