title: Is there a way (JavaScript or jQuery) to sequentially load images (prevent parallel downloads)
body: <p>I have a page which contains a dozen of big images:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
    &lt;img src="1.png" alt="" /&gt;
    &lt;img src="2.png" alt="" /&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Due to images' size, parallel downloading causes too long delay before anything shows.</p>
  
  <p><strong>Question:</strong> how to load images sequentially, so that <code>2.png</code> only starts loading after <code>1.png</code> has been fully loaded and displayed?</p>
  
  <ul>
  <li><p>I don't want lazy loading (unless you know of a plugin which will always <em>load</em> images strictly in the same sequence, regardless of the current viewport)</p></li>
  <li><p>This solution:<a href="https://stackoverflow.com/questions/21502693/loading-images-sequentially">Loading images sequentially</a> doesn't work for me in latest Chrome, Firefox, IE. It will load all images at once, and then show them</p></li>
  <li><p>The plugin suggested in this answer <a href="https://stackoverflow.com/a/25774333/525445">https://stackoverflow.com/a/25774333/525445</a> is somewhat functional but it makes 2, 3 or sometimes more requests at once, so not doing what it's supposed to</p></li>
  <li><p>Then there's this plugin, also proposed in some answer: <a href="http://imagesloaded.desandro.com/" rel="nofollow noreferrer">http://imagesloaded.desandro.com/</a>   It's meant for something else though - to let you know when all images are loaded, which it does well. So I tried to put it to use like this:</p>
  
  <p>var $gallery = $("#gallery");<br>
    $gallery.imagesLoaded( function() {
      $gallery.append('');
      console.log("Image loaded");
    });
    $gallery.append('');</p></li>
  </ul>
  
  <p>The idea here was - to dynamically add images one by one, on imagesLoaded event. However, it gets triggered only for the first image (although it's dynamically added as well), and for the second it doesn't. So the above code causes both images to show, but only 1 console.log() notification</p>
  
  <p>Any suggestions appreciated.</p>