javascript - .addEventListener ("load") 仅在 "loop"中触发两次

Question

我所做的不是循环，它叫什么？

我正在尝试在 DOM 加载后按顺序加载图像，以便稍后进行动画处理。由于某种原因，这仅加载两张图像，总共有 20 张。

希望有人知道原因，谢谢。

function init() {
  var imgDefer = document.querySelectorAll(".img-sequence");
  var lastLoadIndex = 0;

  function loadNextImage() {
    if (imgDefer.length === lastLoadIndex) {
      return;
    }
    console.log("loading image at index " + lastLoadIndex);
    imgDefer[lastLoadIndex].setAttribute(
      "src",
      imgDefer[lastLoadIndex].getAttribute("data-src")
    );
    lastLoadIndex += 1;
    // console.log(lastLoadIndex);
  };
  imgDefer[lastLoadIndex].addEventListener("load", loadNextImage);
  loadNextImage();
  //console.log(imgDefer.length);
}
window.onload = init;

<div><img class="img-sequence" data-src="https://picsum.photos/320/320?image=0" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=1" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=2" /><img class="img-sequence"
    data-src="https://picsum.photos/320/320?image=3" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=4" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=5" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=6"
  /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=7" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=8" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=9" /><img class="img-sequence"
    data-src="https://picsum.photos/320/320?image=10" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=11" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=12" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=13"
  /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=14" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=15" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=16" /><img class="img-sequence"
    data-src="https://picsum.photos/320/320?image=17" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=18" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=19" />
</div>

Answer 1

因为您正在执行 .addEventListener() 循环完成后(不在循环内部)，所以只有一个图像正在注册回调(最后一个图像) )。并且，在此之后，您将手动调用回调，因此它会第二次运行。

您应该将 .addEventListener() 代码移至循环内部，以便每个图像都能获得回调。确保在增加计数器之前放置它，这样就不会跳过第一张图像。

就你所说的你正在做的事情而言......好吧，这是一个循环。它循环遍历节点列表并为每个节点配置一个事件处理程序。

function init() {
  var imgDefer = document.querySelectorAll(".img-sequence");
  var lastLoadIndex = 0;

  function loadNextImage() {
    if (imgDefer.length === lastLoadIndex) {
      return;
    }
    console.log("loading image at index " + lastLoadIndex);
    imgDefer[lastLoadIndex].setAttribute(
      "src",
      imgDefer[lastLoadIndex].getAttribute("data-src")
    );
    imgDefer[lastLoadIndex].addEventListener("load", loadNextImage);
    
    lastLoadIndex += 1;
    // console.log(lastLoadIndex);
    
  };

  loadNextImage();
  //console.log(imgDefer.length);
}
window.onload = init;

<div><img class="img-sequence" data-src="https://picsum.photos/320/320?image=0" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=1" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=2" /><img class="img-sequence"
    data-src="https://picsum.photos/320/320?image=3" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=4" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=5" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=6"
  /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=7" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=8" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=9" /><img class="img-sequence"
    data-src="https://picsum.photos/320/320?image=10" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=11" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=12" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=13"
  /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=14" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=15" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=16" /><img class="img-sequence"
    data-src="https://picsum.photos/320/320?image=17" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=18" /><img class="img-sequence" data-src="https://picsum.photos/320/320?image=19" />
</div>