Last active
September 4, 2019 12:39
-
-
Save alexrqs/b19cc0f45a76b1fbda31ba58a865d4a6 to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I saw that you turned this to an open source project so I opened a new pull request where I added one function.
Cheers!