DEV Community

loading...
Cover image for Wait for a Script to Load in Javascript
Timber

Wait for a Script to Load in Javascript

zach profile image Zach Sherman Originally published at timber.io ・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
    this.global = 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
        resolve(script)
      })

      // 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()
          resolve(window[this.global])
        } catch (e) {
          reject(e)
        }
      } else {
        resolve(window[this.global])
      }
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

Example Usage

const loader = new Loader({
    src: 'cdn.segment.com/analytics.js',
    global: 'Segment',
})

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

Discussion (1)

Collapse
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