2
\$\begingroup\$

My objective is to modify the JavaScript code to get the single image on the page to iterate through images faster. It should be possible to get the images to load in about 10 seconds(about 3 seconds on Windows). Yet I have 0 clue on how to do this.

<!doctype html>
<html>

<head>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>


<body>
  <h2>Image load optimisation test</h2>
  <img id="displayImg" />
  <div>Time: <span id="totalTime"></span></div>
</body>
<script>
  window.onload = (function() {
    var timeElem = document.getElementById("totalTime"),
      img = document.getElementById("displayImg"),
      startX = 120576,
      startY = 78640,
      zoom = 17,
      numTiles = 16,
      updateInterval = 10,
      offsetX = 0,
      offsetY = 0,
      startTime = new Date().getTime(),
      endTime,
      timeoutId;

    function init() {
      var nextTile = getNextTile();

      timeoutId = setInterval(updateTime, updateInterval);

      img.onload = onImgLoad;
      timeElem.innerHTML = "Loading images...";
      setImage(img, nextTile.x, nextTile.y, zoom);
    }

    function updateTime() {
      timeElem.innerHTML = (new Date().getTime() - startTime) + " ms";
    }
    //Sets the src of the image to the given tile. Do not remove cachebust parameter   
    function setImage(imgElem, x, y, z) {
      imgElem.src = "http://nearmap-test-files.s3-website-ap-southeast-2.amazonaws.com/" + x + "_" + y + "_" + z + ".jpg" + "?cachebust=" + Math.floor(startTime);
    }

    //Gets X and Y of the next tile to be loaded. Advances "columns", then
    //"rows" of a numTiles*numTiles grid
    function getNextTile() {
      var tile = {
        x: startX + offsetX,
        y: startY + offsetY
      };

      //Got to the last row of tiles
      if (offsetY >= numTiles) {
        return null;
      }
      offsetX += 1;
      //if we are the end of the row, reset x to zero and start a new row
      if (offsetX >= numTiles) {
        offsetX = 0;
        offsetY += 1;
      }
      return tile;
    }

    function onImgLoad() {
      var nextTile = getNextTile();
      if (nextTile === null) {
        clearInterval(timeoutId);
      } else {
        setImage(img, nextTile.x, nextTile.y, zoom);
      }
    }

    init();
  });
</script>

</html>

Basic I know, but help would be appreciated.

Plnkr below for my working example so far.

https://plnkr.co/edit/N5h7fyFEBMj0C2fC2vgc

\$\endgroup\$
  • \$\begingroup\$ Redirected from Stack Overflow \$\endgroup\$ – Mast May 21 '18 at 9:37
  • \$\begingroup\$ Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code? \$\endgroup\$ – Mast May 21 '18 at 9:39
  • \$\begingroup\$ The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments. \$\endgroup\$ – Brendan May 21 '18 at 9:46
  • \$\begingroup\$ Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing? \$\endgroup\$ – Mast May 21 '18 at 10:31
  • 1
    \$\begingroup\$ Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense. \$\endgroup\$ – Brendan May 21 '18 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.