DEV Community

Cover image for Wait for a Script to Load in Javascript

Wait for a Script to Load in Javascript

zach profile image Zach Sherman Originally published at ・1 min read

Ever needed to wait for a script to load before doing something with it? Here's a quick and easy way to make that happen. Perfect for 3rd party scripts you have no control over like Google Analytics, Segment, Intercom, etc.

All you need is this little class:

export default class ScriptLoader {
  constructor (options) {
    const { src, global, protocol = document.location.protocol } = options
    this.src = src = global
    this.protocol = protocol
    this.isLoaded = false

  loadScript () {
    return new Promise((resolve, reject) => {
      // Create script element and set attributes
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = `${this.protocol}//${this.src}`

      // Append the script to the DOM
      const el = document.getElementsByTagName('script')[0]
      el.parentNode.insertBefore(script, el)

      // Resolve the promise once the script is loaded
      script.addEventListener('load', () => {
        this.isLoaded = true

      // Catch any errors while loading the script
      script.addEventListener('error', () => {
        reject(new Error(`${this.src} failed to load.`))

  load () {
    return new Promise(async (resolve, reject) => {
      if (!this.isLoaded) {
        try {
          await this.loadScript()
        } catch (e) {
      } else {
Enter fullscreen mode Exit fullscreen mode

Example Usage

const loader = new Loader({
    src: '',
    global: 'Segment',

// scriptToLoad will now be a reference to `window.Segment`
const scriptToLoad = await loader.load()
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

andy profile image
Andy Zhao (he/him)

@maestromac Think we could use this? Food for thought at least.

Thanks Zach!

Forem Open with the Forem app