Load images in order, with delay, fallback for no script

Question

I'm wondering if anyone has a nice clean solution to loading images from top to bottom of a page, waiting for the previous image to load before going to the next. And in case the user dosent have javascript fall back on a regular <img> tag.

There are quite a few lazy loading plugins, but I would like to load all images as fast as possible in the order they appear on the website.

The reason for this is that each image is rather large, and the user will look through them from top to bottom in a rather slow fashion.

Answer 1

interesting question. my approach would be something like this

$(function(){

  var loadNext = function(){
    var next_guy = $('#imgz img[x-src]').first();
    next_guy.prop('src', next_guy.attr('x-src'));
    next_guy.removeAttr('x-src');
    
  };
  
  $('#imgz img').on('load',loadNext);
  
});

#imgz img {
  width: 250px;
  border: 1px dotted gray;
  clear: both;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgz">
  <img src="http://i.imgur.com/mThaO.jpg" />
  <img x-src="http://i.imgur.com/DO1kZ.jpg" />
  <img x-src="http://i.imgur.com/lD2HS.jpg" />
  <img x-src="http://i.imgur.com/4vqE3.jpg" />
  <img x-src="http://i.imgur.com/TXXbx.jpg" />
  <img x-src="http://i.imgur.com/TF3z2.jpg" />
</div>