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

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.

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

1 solution

Solution 1

Add your solution here

Preview 0

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

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us