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()代码移动到循环内部，以便每个图像都获得回调。确保在增加计数器之前放置它，这样就不会跳过第一张图像。

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

＆＃13;
＆＃13;
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;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

事件订阅应该在loadNextImage函数内。

function init() {
  var imgDefer = document.querySelectorAll(".img-sequence");
  var lastLoadIndex = 0;
  function loadNextImage() {
    if (imgDefer.length === lastLoadIndex) {
      return;
    }

    // Here
    imgDefer[lastLoadIndex].addEventListener("load", loadNextImage);
    imgDefer[lastLoadIndex].setAttribute(
      "src",
      imgDefer[lastLoadIndex].getAttribute("data-src")
    );
    lastLoadIndex += 1;
  };
  loadNextImage();
}

.addEventListener（“load”）仅在“循环”中触发两次

2 个答案: