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?

What's wrong with just having a in the HTML, since it's async=false? — AdamKG, Jul 21 '13 at 21:59
Well, it would solve your issue. There's other ways, sure - you're binding a 2nd callback in your $(document).ready(), I think you instead want to lose the window.addEventListener line and insert the script directly in the $(document).ready callback - but the simple answer is that script tags are blocking, and that's the behavior you're looking for. — AdamKG, Jul 21 '13 at 22:07
sorry. I'm testing it on cordova browser and it seems that file.js is loaded after $(window).load even if I remove the window.addEventListener line. If I put an Alert before workwithvariablesInfilejs() all works fine. — Claudio Ferraro, Jul 21 '13 at 22:10
Move the workwithvariablesinjs call to inside document.ready(), after the d.body.appendChild() call, and update the question with your updated code. — AdamKG, Jul 21 '13 at 22:19

score 2 · Answer 1 · answered Jul 22 '13 at 19:32

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." );
});

score 1 · Answer 2 · answered Jul 21 '13 at 22:00

1

Use $(window).load(); instead $(document).ready(). See here for more explanations.

answered Jul 21 '13 at 22:00

Iswanto San

18,263
13
58
79

Sorry but window.load is loaded after document.ready. I need to use document.ready to load my code at runtime and when the code is ready I need to work with it later. Don't think it makes sense to use a less quick method cause I need to load my resources quickly. – Claudio Ferraro Jul 21 '13 at 22:03
@ClaudioFerraro: You're not going to load them any quicker by inserting a script element with JS. In fact, with the element in the page at load time, at least the browser can know it'll have a script to load, and can queue up the retrieval (even if the execution happens later). With the element dynamically added, it doesn't even have that, and can't even start loading the script -- much less running it -- til sometime after you've added the element. – cHao Jul 21 '13 at 22:36
Yes but I need to do that way. Suppose that I'm loading the javascript filename from a text file. Maybe this way is better. – Claudio Ferraro Jul 22 '13 at 13:11

score 1 · Answer 3 · edited May 23 '17 at 11:59

1

You could rework your logic to trigger off the load event after appending the script tag to your page.

see: How to check if an asynchronously loaded script has finished loading in javascript

Since you are using JQuery, you could leverage JQuery.getScript

edited May 23 '17 at 11:59

Community

1
1

answered Jul 22 '13 at 19:10

dc5

12,341
2
35
47

How start executing code when the script loading is completed

3 Answers3