加载第一行上的第二个图像后开始加载第二行

Question

我想要做的是在第一行图像加载后第二行图像开始加载。目前它等待第一行完全加载所有10个图像，我将如何触发它？

这是一个示例网址 http://satbulsara.com/experiment-04/

这是我的代码

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);
});

Answer 1

将t = delay * 2;放在第二行的代码之前，为其设置初始延迟。

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);
});

使其适合多行（同样，不要自己重复）：

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;
});

并将class="row"添加到<ul>元素。