Async loading of diff resource types in the DOM

loadIframe.js

const loadIframe = (url, attributes = {}, target = document.body) =>
  new Promise((resolve, reject) => {
    const iframe = document.createElement('iframe')

    const {
      height = 0,
      width = 0,
      style = {
        display: 'none',
      },
      ...rest
    } = attributes

    Object.assign(iframe, {
      ...rest,
      src: url,
      height,
      onload: () => {
        resolve(iframe)
      },
      onerror: (error) => {
        iframe.parentElement.removeChild(iframe)
        reject(error)
      },
      width,
    })

    Object.assign(iframe.style, style)

    target.appendChild(iframe)
  })

export default loadIframe

loadImage.js

const loadImage = (url) => new Promise((resolve, reject) => {
  const image = new Image()
  image.onload = resolve
  image.onerror = reject
  image.src = url
})

export default loadImage

loadScript.js

const loadScript = (url, options = {}) =>
  new Promise((resolve, reject) => {
    const head = document.head || document.getElementsByTagName('head')[0]
    const script = document.createElement('script')

    const { async = true, charset = 'utf8', type = 'text/javascript', ...rest } = options

    Object.assign(script, {
      ...rest,
      async,
      charset,
      type,
      src: url,
      onload: () => {
        script.parentElement.removeChild(script)
        resolve()
      },
      onerror: (error) => {
        script.parentElement.removeChild(script)
        reject(error)
      },
    })

    head.appendChild(script)
  })

export default loadScript

loadStylesheet.js

const loadStylesheet = (url, options = {}) =>
  new Promise((resolve, reject) => {
    const head = document.head || document.getElementsByTagName('head')[0]
    const link = document.createElement('link')

    const { rel = 'stylesheet', ...rest } = options

    Object.assign(link, {
      ...rest,
      rel,
      href: url,
      onload: () => {
        resolve(link)
      },
      onerror: (error) => {
        link.parentElement.removeChild(link)
        reject(error)
      },
    })

    head.appendChild(link)
  })

export default loadStylesheet