How to load the javascript file dynamically and wait for fully loaded

Question

0.00/5 (No votes)

See more:

i am dynamically loading the js file into DOM, see the below code block:

console.log('outside of onload block');

called first,

and

jstag.onload = function () {
    console.log('file loaded into the dom',);
    
}

called later,

can i wait till the onload function fully loaded into DOM then after the outside of onload code get execute.

What I have tried:

var jstag = document.createElement("script");
jstag.src = "/parent.js";
document.head.appendChild(jstag);
jstag.onload = function () {
    console.log('file loaded into the dom',);
    
}
console.log('outside of onload block');

Posted 21-Jun-24 4:51am

Member 10371658

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2024-06-21T06:28:00

Solution 1

I've used this function in the past:

JavaScript

const loadScriptAsync = (() => {
    "use strict";
    const loadedScripts = {};

    const loadScriptCore = (src) => {
        const script = document.createElement("script");
        
        return new Promise((resolve, reject) => {
            script.onload = () => resolve(true);
            script.onerror = (e) => reject(e);
            script.src = src;
            document.body.appendChild(script);
        });
    };

    return (src) => {
        if (loadedScripts.hasOwnProperty(src)) {
            return loadedScripts[src];
        }

        const result = loadScriptCore(src);
        loadedScripts[src] = result;
        return result;
    };
})();

You can either chain the additional code in the .then callback to the Promise[^]:

JavaScript

loadScriptAsync(src).then(() => { ... });

or use async / await[^]:

JavaScript

(async () => {
    await loadScriptAsync(src);
    ...
})();

Posted 21-Jun-24 6:28am

Richard Deeming

Comments

Pete O'Hanlon 22-Jun-24 14:26pm

Very nice. I'll load this into my repertoire now.

Member 10371658 24-Jun-24 6:43am

Hi Richard,

I tried the posted solution, but it's not worked for me, i am not getting the loading script file reference : see below code

const loadScriptAsync = (() => {
"use strict";
const loadedScripts = {};

const loadScriptCore = (src) => {
const script = document.createElement("script");

return new Promise((resolve, reject) => {
script.async = false;
script.onload = () => resolve(true);
script.onerror = (e) => reject(e);
script.src = src;
document.head.appendChild(script);
});
};

return (src) => {
if (loadedScripts.hasOwnProperty(src)) {
return loadedScripts[src];
}

const result = loadScriptCore(src);
loadedScripts[src] = result;
return result;
};
})();

(async () => {
await loadScriptAsync('/parent.js');
})();

var comm = new Parent();
console.log('file loaded into dom, comm file', comm);

Richard Deeming 24-Jun-24 7:09am

You've misunderstood. The code you want to run after the script has loaded either needs to be in the then callback, or it needs to be within the async function, after the await.

What you've done is put it after the async function. That means it will run before the script has finished loading.

You need to change your code to:

(async () => {
    await loadScriptAsync('/parent.js');
    var comm = new Parent();
    console.log('file loaded into dom, comm file', comm);
})();

Member 10371658 26-Jun-24 11:31am

Hi Richard,

thanks a lot for this.