Request images synchronously using JavaScript?

Question

I am trying to use JavaScript to control the loading of images. The server that these images are stored on can only deal with 1 request at once, therefore, a webpage with two or more images would cause multiple requests to be sent to the server (overloading it, causing malformed images to be returned).

Below is an example of the page displaying the images...

<html>
<head>
    <title>Load Images Synchronously</title>
</head>
<body>
<table align="left" border="1" cellpadding="0" cellspacing="0" style="width:500px;">
    <tbody>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img1" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img2" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img3" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img4" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img5" src="" /></td>
        </tr>
    </tbody>
</table>
</body>
</html>

As you can see, this contains 5 image tags, that are loaded via the script within the html (shown below). Setting the scr of the img tag, the images are displayed, however, they are still requested asynchronously.

<script>
document.getElementById("img1").scr="image1.png"
document.getElementById("img2").scr="image2.png"
document.getElementById("img3").scr="image3.png"
document.getElementById("img4").scr="image4.png"
document.getElementById("img5").scr="image5.png"
</script>

I need to know how to get these images to load, one after the other so not to overload my low powered server.

I have tried using IF statements to check the 'naturalheight' of the images (if it is 0, then the image has not been loaded) but I am pretty new to JavaScript and struggled with this.

I am looking for a simple solution (perhaps one that wraps around functions) and will check if the image is loaded before trying to load the next image.

I also require the code to check the image is loaded 100 times, with 100ms delay in between. If the image has not loaded after this time, move on to the next.

Please can some boffin give me some guidance as to how to code this?

*"a webpage with two or more images would cause multiple requests to be sent to the server (overloading it, causing malformed images to be returned)"* That needs to be fixed **server-side**. If it can only deal with one request at a time, it should keep any other request pending until it's free to deal with them. — T.J. Crowder, Aug 25 '15 at 13:31
If he could fix this issue server-side he wouldn't be asking this, or at least he shouldn't. — , Aug 25 '15 at 13:34
Try with a callback like this? [http://stackoverflow.com/a/280087/627283][1] [1]: http://stackoverflow.com/a/280087/627283 — user627283, Aug 25 '15 at 13:38
Yes, the server is VERY basic and i have exhausted all possible ways to deal with multiple requests, with no luck. That is why i am trying to control the client side using JavaScript. — GeoReb, Aug 25 '15 at 13:46

score 0 · Answer 1 · answered Aug 25 '15 at 13:34

I think you take the problem by the wrong way. In Javascript you cannot wait in a thread while another one load an image, you have to use a callback.

Your solution could be to add all image to load in an Array, then launch the loading of the first image. In the success callback method of the loading, do the display, remove the loaded image from the array, then call again the method to load the new first image of your Array. It will run until all image arel oaded, on after another.

Stephen O'Connor · Accepted Answer · 2015-08-25T16:21:30.703

0

You can use the image onload callback to serialise your image loading. Create a list of images to load matched with a list of ids.

var srclist = ["src1", "src2", ....];
var idlist = ["img1", "img2", ....];

function loadImage(index){
   var image = document.getElementById(idlist[index]);
   image.onload = function() {
      index++;
      if(index < idlist.length) {
          loadImage(index);
      }
   }
   image.onerror = function() {
      //better handle this
   }
   image.src = srclist[index];
}

loadImage(0);

You need to think about what happens if the image loading fails - this will throw the indexing off.

edited Aug 25 '15 at 16:21

answered Aug 25 '15 at 13:46

Stephen O'Connor

1,465
1
10
20

Thankyou! How excellent this website is for help! When an image fails to load, i would like to retry in a loop. If after that loop (of perhaps 100 retrys) the image is still not loaded, i would like to skip the image and move onto the next one. Would this be simple to add? – GeoReb Aug 25 '15 at 13:52
Please excuse my naivety - i am quite new to JavaScript! – GeoReb Aug 25 '15 at 13:55
It appears to me that the code line "image.src = srclist[index]" will not execute as the "loadImage(index)" is called beforehand? Or am I mistaken? @Steve O'Connor – GeoReb Aug 25 '15 at 14:17
the `onload` function is not called in loadImage it's called by the system when the image is loaded – Stephen O'Connor Aug 25 '15 at 14:26
Ah, I understand now. Many Thanks – GeoReb Aug 25 '15 at 14:28
I am most likely to just duplicate the onload function for the onerror function, however, could you please advise me how to add a loop to the onerror function that retrys to load the failed image n times before finally giving up and moving onto the next image? @Steve O'Connor – GeoReb Aug 25 '15 at 14:31
You can do this by calling loadImage again with the same index and then you need a retry count that gets incremented in the `onerror` callback. But you might not want to do this. An error means there is a problem which is unlikely to get fixed by a retry, though it might:) – Stephen O'Connor Aug 25 '15 at 14:48

Request images synchronously using JavaScript?

2 Answers2