DEV Community

loading...

How to load third-party Javascript on demand | Notes

abhiweb profile image Kumar Abhishek Originally published at abhi.page on ・1 min read

A small script to dynamically (and, asynchronously) load third-party Javascript files on demand.

  • It inserts a <script> tag in the head to load the script.
  • Checks if a <script> tag already exists with the same source to avoid duplicate script tags.
    • I use it with a Web Component based library where another component may already have loaded the script.
  • Callbacks after successful or failed load.
  • Note: I also use a retry logic (that removes and re-attaches the script tag) to avoid temporary network failures. I have not included it here for simplicity.
/**
 * @param {string} src The URL of the script.
 * @callback onLoadSuccessCallback Callback when script is loaded successfully.
 * @callback onLoadErrorCallback Callback when the script fails to load.
 */
function loadScript(src, onLoadSuccessCallback, onLoadErrorCallback) {
    if (!src) {
        console.error("Error: missing src");
        return;
    }

    // Check if the script is already loaded
    if (document.querySelector('script[src="' + src + '"]')) {
        // Script already loaded...
        console.warn("Script Already Loaded. Skipping: ", src);
        onLoadSuccessCallback();
    } else {
        // Script not already leaded; load script...
        // Create script tag
        const js = document.createElement('script');
        js.src = src;
        js.setAttribute("async", "");

        // Setup success callback
        if (onLoadSuccessCallback) {
            js.onload = onLoadSuccessCallback;
        }

        // Setup error callback
        if (onLoadErrorCallback) {
            js.onerror = onLoadErrorCallback;
        }

        // Add the script tag to <head>
        document.head.appendChild(js);
    }
};
Enter fullscreen mode Exit fullscreen mode

Use it like this:

loadScript('url/or/path/to/script.js', () => {
    console.log("Script loaded");
    // Do something with the script.
}, () => {
    console.error("Script load failed");
    // Handle error.
});
Enter fullscreen mode Exit fullscreen mode

Read on abhi.page

Discussion (0)

pic
Editor guide