How to load only one time even if the script is required multiple times, and how to check or detect if the script is loaded.

loadUniqueScripts.js

// keep track of the loaded libraries
const loadedLibraries = []

function registerLibraryLoaded(id) {
  // record the libs only if the array doesn't contain the same already
  if (loadedLibraries.indexOf(id) < 0) {
    loadedLibraries.push(id)
  }
}

// check if the script.id exist already on the page
// to add a listener because the library you asked to load
// might be on the loading process
// and after is loaded register the lib to avid this process twice
function appendUnique(script, next) {
  const appendedScript = document.getElementById(script.id)
  if (appendedScript) {
    appendedScript.addEventListener('load', function onLoadScript() {
      appendedScript.removeEventListener('load', onLoadScript)
      registerLibraryLoaded(script.id)
      next()
    })
    return
  }
  
  // this will only add a new script tag if the lib is not already on the DOM
  // the above part of this function will handle the scenario where
  // even tho is already on the DOM might be still loading
  document.body.appendChild(script)
}

function loadScript({ id, src }) {
  const script = document.createElement('script')

  return new Promise((resolve, reject) => {
    // once the lib is registered you can resolve immediatelly
    // because it means that is fully loaded
    if (loadedLibraries.indexOf(id) > -1) {
      resolve(`${id} was loaded before`)
    }

    script.addEventListener('load', function onLoadScript() {
      script.removeEventListener('load', onLoadScript)
      registerLibraryLoaded(id)
      resolve(id)
    })

    script.onerror = function onErrorLoadingScript() {
      reject()
    }

    script.id = id
    script.src = src
    appendUnique(script, resolve)
  })
}

export default loadScript

Load scripts dynamically include some scenarios where this behaves better as an NPM library, so now just

npm i -S load-external-scripts

more infor about dynamically load external scripts https://github.com/alecsgone/load-external-scripts

I really love this gist, simple and useful although I have some comments (up to discussion)

• Nice use of constant here. But maybe naming it in upper case?

• Why not just test on -1 here? if (loadedLibraries.indexOf(id) === -1)

• I don't get the use of constant here, could you care to explain?

• Add a test on this, the user's page might have no body.

Cheers for this code!

I saw that you turned this to an open source project so I opened a new pull request where I added one function.

Cheers!