javascript - 数组中的元素被过早删除？

Question

我正在制作一个简单的图像延迟加载机制。我从要处理的图像数组开始，当我加载每个图像时，我想从数组中删除所述图像。

我的代码如下:

  const removeFromArray = (id) => {
    const position = images.indexOf(id);

    if (id.classList.contains(classes.loaded)) {
      images.splice(id, 1);
    }
  }

  const setHeight = (img, target) => {
    const parentWidth = img.parentNode.offsetWidth;
    const initw = target.width;
    const inith = target.height;

    return (parentWidth / initw) * inith;
  }

  const loadImage = (img) => {
    const image = new Image();

    img.classList.add(classes.loading);
    image.src = img.getAttribute('data-lazy-img');
    image.onload = function(e) {
      const target = e.target || e.srcElement;

      img.style.height = `${setHeight(img, target)}px`;
      img.classList.add(classes.loaded);
      img.classList.remove(classes.loading);
      img.src = img.getAttribute('data-lazy-img');

      removeFromArray(img);
    }
  }

问题是，有时错误的图像会被删除(特别是当我删除后面的图像时)。

我的整个代码在这里:http://codepen.io/tomekbuszewski/pen/LbRQxq?editors=0011

我能做什么？

Answer 1

使用图像 id 作为参数调用 splice 似乎没有任何意义:

 images.splice(id, 1);

您可能打算这样做:

 images.splice(position, 1);