Пересечение Наблюдатель - Последнее изображение не показывает - PullRequest
Новая
       15

Пересечение Наблюдатель - Последнее изображение не показывает

0 голосов
/ 30 марта 2019

Я пытаюсь понять API-интерфейс Intersection Observer.В моем тесте я отправляю 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>

Это потому, что target.forEach (lazyLoad); внутри возврат men.map (man =>{...} ?

...