交叉路口观察员-未显示最后一张图片

Question

我试图了解Intersection Observer API。在测试中，我将HTTP请求发送到API，映射到API响应并列出一些图像。 然后，我使用交点观察器来延迟加载那些图像。

它似乎正在工作。但是有人可以告诉我为什么最后一张图像根本不显示吗？

// Defining Helper functions
const createNode = element => document.createElement(element);
const append = (parent, el) => parent.appendChild(el);

const ul = document.querySelector('#users');

const config = {
  url: 'https://api.randomuser.me',
  gender: 'male',
  numberCards: 8
};

// Call API to get cards
fetch(`${config.url}?gender=${config.gender}&results=${config.numberCards}`)
  .then(function(response) {
    return response.json();
  })
  .then(function(apiResponse) {
    // Output API response to console to view.
    console.log(apiResponse.results);
    const users = apiResponse.results;
    const men = users.map(user => user);

    return men.map(man => {
      // Creating DOM elements
      let li = createNode('li'),
        div = createNode('div'),
        img = createNode('img');

      // Adding BEM classes
      li.classList.add('card');
      div.classList.add('card__item');
      img.classList.add('card__image');

      /* =========================================
                  Using Lazy loading
      ========================================== */
      // Adding a custom data attribute to each image
      img.setAttribute('data-lazy', man.picture.large);
      const targets = document.querySelectorAll('img');
      targets.forEach(lazyLoad);

      // Building cards
      append(li, div);
      append(div, img);
      append(ul, li);
    });
  })
  .catch(function(error) {
    console.log(error);
  });

/* =========================================
  Lazy loading with Intersection Observer
========================================== */
const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        img.classList.add('fade');

        observer.disconnect();
      }
    });
  });
  io.observe(target);
};

.card__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style-type: none;
  border-radius: 6px;
  -webkit-filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
  text-align: center;
}

.card {
  flex-basis: 100%;
  height: 265px;
  position: relative;
  padding: 10px;
}

.card__item {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  background: #fff;
}

.card__image {
  width: 170px;
  border-radius: 50%;
  opacity: 0;
  transition: all 1.4s ease-in-out;
}

.card__image.fade {
  opacity: 1;
  transition: all 1.4s ease-in-out;
}

<ul id="users" class="card__wrapper"></ul>

是因为 targets.forEach（lazyLoad）; 位于 return men.map（man => {...} 中吗？