AJAX: 从文件夹中加载图像并以交错延迟显示

Question

我正在创建一个非常简单的画廊。它将存在于 Umbraco 中，我希望能够从多个文件夹中读取图像并按文件夹进行过滤。我有那个部分，但我坚持需要图像一次出现一个，并且之间有轻微的延迟。延迟似乎根本不起作用。 setTimeout 也没有。他们都只是一次显示。任何帮助将不胜感激。

$('body').on('click', '.filter-category',  function(){
var filter = $(this).data('filter'),
    dir = "../slides/" + filter;
$(this).toggleClass('filter-on');
if($(this).hasClass('filter-on')){

  $.ajax({
    url: dir,
    timeout: 2000,
    success: function(data) {
      $(data).find("a:contains(" + fileextension + ")").each(function(i) {
          var filename = this.href.replace(window.location.host, "").replace("http://", "");
          var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
          $(newImg).delay(500).appendTo('.gallery').fadeIn(400);
      });
      updateSlides();
    }
  });
}else{
  $('.gallery-image').each(function(){
    var category = $(this).data('category');
    if(category == filter){
      $(this).remove();
    }
  });
  updateSlides();
}

});

Answer 1

您可以用一行代码解决这个问题（如我的示例所示），但请阅读整个答案以了解为什么您的解决方案不起作用。

此代码：

  $(data).find("a:contains(" + fileextension + ")").each(function(i) {
      var filename = this.href.replace(window.location.host, "").replace("http://", "");
      var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
      $(newImg).delay(500).appendTo('.gallery').fadeIn(400);
  });

...只是遍历图像并一次附加它们，并为它们添加相同的 500 毫秒延迟。您只会在每个之间给予或花费几毫秒，因为它们都是在循环中同步处理的。

看起来像这样（没有延迟）：

0ms // 1st image
3ms // 2nd image
5ms // 3rd image
...

或者这个（有延迟）：

500ms // 1st image
503ms // 2nd image
505ms // 3rd image
...

这就是为什么它们似乎同时发生，而不是错开。

--

为了达到你想要的效果（惊人的效果），你需要确保每张图片都完成它的工作，然后再开始延迟下一张图片。有很多方法可以实现这一点，但我将采用一种简单、实用的方法，即增加时间。

新代码：

  var delay = 500;

  $(data).find("a:contains(" + fileextension + ")").each(function(i) {
      setTimeout(() => {
          var filename = this.href.replace(window.location.host, "").replace("http://", "");
          var newImg = ("<div class='gallery-image' data-category='" + filter + "' ><img src='" + dir + filename + "'></div>");
          $(newImg).appendTo('.gallery').fadeIn(400);
      }, delay);

      delay += delay;
  });

每次附加图像时，都会为其自身添加延迟。下一个图像将等待额外的延迟量，从而产生交错的错觉。

所以新的流程如下：

500ms  // 1st image
1003ms // 2nd image
1505ms // 3rd image
...

AJAX: 从文件夹中加载图像并以交错延迟显示

AJAX: load images from folders and display with a staggered delay

javascript

ajax

jquery

umbraco7