title: Problem with randomly pre-loaded image when changing image every 15 seconds
body: <p>I'm a newbie at coding and this is for a school project. I'm trying to change an image every 15 seconds, and I have figured out how to do it. however, I want an image to be shown immediately and not after 15 seconds. my code is below:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;center&quot;&gt;
      
  &lt;img src=&quot;&quot; id=&quot;image&quot;&gt;
  
  &lt;/div&gt;
  
      
  &lt;script type=&quot;text/javascript&quot;&gt;
      let image = document.getElementById('image');
      let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png']
      setInterval(function(){
          let random = Math.floor(Math.random() * 100);
          image.src = images[random];
      }, 15000);
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I know I can change the image by manipulating the <code>src</code> attribute of the <code>img</code> tag, but I want a random image to be shown upon load. I've been trying to find a solution but I couldn't find any. Can anyone help me with how to do this?</p>