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

what have second row of image start loading after second image on first has loaded. waits first row load 10 images, how trigger this?

this example url http://satbulsara.com/experiment-04/

and 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 code second row set initial delay 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 suitable 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" <ul> elements.