title: The page is stuck on "Loading..." when using preload() in p5.js
body: <p>I am currently learning p5.js in javascript.</p>
  
  <p>I am trying to make a DVD screensaver in p5.js, and I used one of The Coding Train's videos to help me. However, it doesn't quite work for me.</p>
  
  <p>Here is a link to his video: <a href="https://www.youtube.com/watch?v=0j86zuqqTlQ" rel="nofollow noreferrer">https://www.youtube.com/watch?v=0j86zuqqTlQ</a></p>
  
  <p>I use preload() to load the DVD logo, but when I put it in my code, the whole page just turns into "Loading...". </p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let x;
  let y;
  let xspeed;
  let yspeed;
  
  let dvd;
  
  function preload() {
      dvd = loadImage("dvd.png");
  }
  
  function setup() {
      createCanvas(800, 600);
      x = 400;
      y = 300;
      xspeed = 10;
      yspeed = 10;
  }
  
  function draw() {
      background(0);
      image(dvd, x, y);
      x = x + xspeed;
      y = y + yspeed;
      
      if (x + 80 == width || x === 0) {
          xspeed = -xspeed;
      }
      if (y + 60 == height || y === 0) {
          yspeed = -yspeed;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          
          &lt;script src="dvd-screensaver.js"&gt;&lt;/script&gt;
          &lt;script src="p5.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is for a school project.</p>