javascript - 在第一行的第二张图片加载完成后开始加载第二行

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>元素。