Start loading the second row after the second image on the first row has loaded

What I would like to do is have the second row of image start loading after the second image on the first has loaded. Currently it waits for the first row to fully load all 10 images, how would I trigger this?

This is an example url http://sa开发者_如何学运维tbulsara.com/experiment-04/

and this is my code

var delay = 200, t = 0;
$("#rowOne").children('li').css('display', 'none').each(function(){
  t += delay;
  var $li = $(this);
  setTimeout(function(){
    $li.fadeIn(1900);
  },t);
});

$("#rowTwo").children('li').css('display', 'none').each(function(){
  t += delay;
  var $li = $(this);
  setTimeout(function(){
    $li.fadeIn(1900);
  },t);
});

Put t = delay * 2; before the code for the second row to set the initial delay for it.

var delay = 200, t = 0;
$("#rowOne").children('li').css('display', 'none').each(function(){
  t += delay;
  var $li = $(this);
  setTimeout(function(){
    $li.fadeIn(1900);
  },t);
});

t = delay * 2;

$("#rowTwo").children('li').css('display', 'none').each(function(){
  t += delay;
  var $li = $(this);
  setTimeout(function(){
    $li.fadeIn(1900);
  },t);
});

To make it suitable for multiple rows (also, don't repeat yourself):

var delay = 200, t = 0;
$(".row").each(function() { 
  $(this).children('li').css('display', 'none').each(function(
  {
    t += delay;
    var $li = $(this);
    setTimeout(function(){
      $li.fadeIn(1900);
    },t);
   });
   t = delay * 2;
});

And add class="row" to the <ul> elements.