how to know if the javascript, which has been loaded by a javascript, has been loaded

Question

I know my subject is quite tricky but i dont know how to much more ellaborate it on the subject alone. so here how it goes. i have a button

<a href="#" onClick="loadtheFile()">Load IT!</a>

on the script tag:

function loadTheFile() {
var script = $("<script><\/script>");
script.attr("type", "text/javascript");
script.attr('src','http://www.thisismyexternalloadingjsfile"');
$('body').append(script);
alert("done! the file has been loaded");
}

the script well, when loaded will automatically have a modal box. but the problem is, my alert seems to fire first than what is one the script

so how will i know if i have finished to load the script?

update for the first attempt to answer:

function loadTheFile() {
    var script = $("<script><\/script>");
    script.attr("type", "text/javascript");
    script.attr('src','http://www.thisismyexternalloadingjsfile"');
    $('body').append(script);
    $(document).ready(function() {
      alert("done! the file has been loaded")};
    }

same problem

there is a typo onclick="loadtheFile" and function name is loadTheFile — brk, Nov 16 '15 at 10:05
@gabriel the script file was given to me so that i could attach it on our website, once the script file is loaded it pop a modal box which will have user interactions and sends data on a CRM-like structure, so what im doing is to present that script. handled by an event. — Joseph Bada, Nov 16 '15 at 10:15

T.J. Crowder · Answer 1 · 2015-11-16T10:09:42.177

6

alert does indeed run before the script has been loaded. All that appending the script tag to the page does is append the script tag to the page. Then the browser has to download the script and, once received, run it. That will be after your loadTheFile function has exited.

So you need to get a callback when the script has actually be loaded and run. This is more standard than it used to be, but still has some cross-browser hassles. Fortunately for you, jQuery's already solved this problem for you (since you're using jQuery already):

function loadTheFile() {
    $.getScript('http://www.thisismyexternalloadingjsfile"')
        .then(function() {
            alert("done! the file has been loaded");
        });
}

Re your comment:

but my script file has data-* attributes

Assuming you're talking about data-* attributes on the script tag, then you'll have to do a bit more work, but it's still fairly straightfoward:

function loadTheFile() {
    var load = $.Deferred();
    var script = document.createElement('script');
    script.src = 'http://www.thisismyexternalloadingjsfile"';
    // No need for `type`, JavaScript is the default
    script.setAttribute("data-foo", "bar");
    script.onreadystatechange = function() {
        if (script.readyState === "loaded") {
            load.resolve();
        }
    };
    script.onload = function() {
        load.resolve();
    };
    load.then(function() {
        alert("done! the file has been loaded");
    });
    document.body.appendChild(script); ;// Or wherever you want to put it
}

The onreadystatechange bit is to handle older versions of IE.

edited Nov 16 '15 at 10:09

answered Nov 16 '15 at 10:02

T.J. Crowder

1,031,962
187
1,923
1,875

i want this answer! but my script file has data-* attributes. please ellaborate more how to get that done.. this would be of great help! – Joseph Bada Nov 16 '15 at 10:03
i just didnt included the other attributes in my example – Joseph Bada Nov 16 '15 at 10:04
@JosephBada: I don't know what "my script file has data-* attributes" means. Do you mean the script *tag*? – T.J. Crowder Nov 16 '15 at 10:04
something like i want to add so how will i load this? – Joseph Bada Nov 16 '15 at 10:06
@T.J.Crowder I assume he means data-* attrs as in `
` – Oliver Nov 16 '15 at 10:06
Appending script using jQuery `append()` is synchronous AFAIK so OP's code would work the same here, correct? – A. Wolff Nov 16 '15 at 10:08
@A.Wolff: No, appending a `script` element with a `src` attribute via `append` is **not** synchronous with the running of that script. – T.J. Crowder Nov 16 '15 at 10:10
@JosephBada: I've updated to show how you would take control of the process. – T.J. Crowder Nov 16 '15 at 10:10
@Tobsta: Which is why I asked the OP if that was what he meant (*"do you mean the script tag?"*). – T.J. Crowder Nov 16 '15 at 10:11
@T.J.Crowder Ya, just tested it, thx for your feedback! – A. Wolff Nov 16 '15 at 10:15
im gonna try this one now! thanks @T.J.Crowder. will give you feedback – Joseph Bada Nov 16 '15 at 10:16
@T.J.Crowder issue still persist. the alert still fires off than the modal (when the script is loaded, there will be a pop up modal) – Joseph Bada Nov 16 '15 at 10:28
@JosephBada: Then presumably the script is delaying showing the modal slightly. You'll have to hook into whatever event it fires when it does that, the above just waits for the script to be run, it doesn't (and can't) generically identify that the script has set up something to happen after a further delay. – T.J. Crowder Nov 16 '15 at 10:42

score 0 · Answer 2 · answered Nov 16 '15 at 10:01

Rather than forge the script with text and jQuery, just use native Javascript:

var s = document.createElement('script');
s.onload = scriptLoaded;
s.src = '/path/to/my.js';
document.body.appendChild(s);

function scriptLoaded() {
    console.log('Script is loaded');
}

score 0 · Answer 3 · answered Nov 16 '15 at 10:01

Try something along these lines:

Your main page:

function whenScriptIsReady(){
  alert('This function is called when the other script is loaded in!')
}
function loadTheFile() {
  var script = $("<script><\/script>");
  script.attr("type", "text/javascript");
  script.attr('src','myotherjs.js');
  $('body').append(script);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="loadtheFile()">Load IT!</a>

myotherjs.js:

alert('This will automatically run when the JS is loaded in!');
whenScriptIsReady();

the other js is an external file of which i dont have access to write on. the other js will accepts, and send data. what im doing is to present that — Joseph Bada, Nov 16 '15 at 10:08

score 0 · Answer 4 · answered Nov 16 '15 at 10:04

JavaScript is executed asynchronously, so you alert will be executed before the browser can load the new script. If you want to execute logic after the script has been loaded, you could add an event listener to your script that will call the function 'loadFunc` once the script load is completed:

var loadFunc = function() {
  alert("External Javascript File has been loaded");
};

//Other browsers trigger this one
if (script.addEventListener)
  script.addEventListener('load', loadFunc, false);

how to know if the javascript, which has been loaded by a javascript, has been loaded

4 Answers4