title: How to load only one image in HTML
body: <p>So I have a website for a webcomic, which has many images. I created an interface which changes the source of the image every time the user clicks, "next", "previous", and so forth. (The comic files are indexed)</p>
  
  <pre><code>Pseudocode:
  
  function goTo(word)  {
      num = (get current comic num);
      if (word = next):
          doc.getID("myComic").src = "comic"+(num+1)+".png";
          num++;
      // And similarly for prev, first, last, keywords...
  }
  </code></pre>
  
  <p>This changes the image when I click the buttons, however, the webpage loads all the comic images at once, according to giftofspeed.com. This is bad, as I do not want my page to load many MBs of data at once; only the image that the src change calls on. How do I make sure that the page loads the one image that is viewed?</p>