HTML: After Dynamic JavaScripts Loaded Completely

Question

I am loading my JavaScript files dynamically in the page:

<html>

<head>
    <script type="text/javascript">
        window.onload = function () {
            var script1 = document.createElement('script'),
                script2 = document.createElement('script'),
                script3 = document.createElement('script');

            script1.type = 'text/javascript';
            script1.src  = 'myScript1.js';
            script2.type = 'text/javascript';
            script2.src  = 'myScript2.js';
            script3.type = 'text/javascript';
            script3.src  = 'myScript3.js';

            document.body.appendChild(script1);
            document.body.appendChild(script2);
            document.body.appendChild(script3);
        }
    </script>
</head>

<body>

</body>
</html>

I need to know when these Scripts loaded completely. Is there any workaround or code snippets to do this?

Possible duplicate of stackoverflow.com/questions/3768768/… — Magicprog.fr
– Magicprog.fr, Commented Jul 11, 2015 at 9:41
@Magicprog.fr, No, it's not duplicate. The question you've mensioned is asking for JavaScript existence but loaded complete. — Vahid
– Vahid, Commented Jul 11, 2015 at 10:02

Jaromanda X · Accepted Answer · 2015-07-11 09:46:02Z

1

before document.body.appendChild

scrimpt1.addEventListener('load', function() { console.log('loaded'); });

obviously you'll want to do "something useful" instead of the simple console.log I've shown

BUT ... this isn't always realiable

try this

var numScripts;
function scriptLoaded() {
    numScripts --;
    if(numScripts == 0) {
        console.log('huzzah all scripts loaded');
    }
}

then, your code

    window.onload = function () {
        var script1 = document.createElement('script'),
            script2 = document.createElement('script'),
            script3 = document.createElement('script');
        numScripts = 3;
        script1.type = 'text/javascript';
        script1.src  = 'myScript1.js';
        script2.type = 'text/javascript';
        script2.src  = 'myScript2.js';
        script3.type = 'text/javascript';
        script3.src  = 'myScript3.js';

        document.body.appendChild(script1);
        document.body.appendChild(script2);
        document.body.appendChild(script3);
    }

at the end of each of your scripts, put something like

if(windows.scriptLoaded) {
    scriptLoaded();
}

edited Jul 11, 2015 at 9:46

answered Jul 11, 2015 at 9:40

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

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

1 Comment

Vahid Over a year ago

Thank you for the answer. The second solution is better I think and for the first one I prefer this one: stackoverflow.com/a/3768844/3682369

Abdullahi · Accepted Answer · 2015-07-11 10:15:09Z

0

Use a callback

function greetFinished() {
  alert("Do stuff finished");
}

function greet (greeting, callback) {
  alert(greeting)
  callback (options);
}

greet("Hello",greetFinished);

greetFinished will be called inside the greet function greetFinished is a callback it will be called after the alert.

answered Jul 11, 2015 at 10:15

Abdullahi

1548 bronze badges

Collectives™ on Stack Overflow

HTML: After Dynamic JavaScripts Loaded Completely

2 Answers 2

1 Comment

Use a callback

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Use a callback

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related