examples/testing-dom__wait-for-resource/public/index.html

<head>
  <link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
  <main>
    <p>The title below will change its color after the app's style loads.</p>
    <h1>Page title</h1>
    <p>Below an image will appear after a short delay, first without an image, then the image will load after a delay.</p>
  </main>
  <script>
    // example of a delayed CSS resource
    setTimeout(() => {
      // now load dynamic style to apply to H1 element
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.type = 'text/css'
      link.href = 'app.css'
      document.head.appendChild(link)
    }, 1000)

    // example of a delayed image element
    // 1. it creates an IMG element after a delay
    // 2. it loads the actual image after a delay
    setTimeout(() => {
        const image = document.createElement('img')
        image.alt = 'delayed image'
        image.width = '120'
        image.height = '40'

        // load the actual image after another short delay
        setTimeout(() => {
          image.src = 'cypress-logo.png'
        }, 1000)

        document.body.appendChild(image)
      }, 1500)

    // example of a delayed JS load
    setTimeout(() => {
      const script = document.createElement('script')
      script.src = 'a-script.js'
      document.head.appendChild(script)
    }, 1500)
  </script>
</body>