Intersection Observer with lazy loading

Question

i want to achieve this behaviour from this example with images https://codepen.io/ryanfinni/pen/jONBEdX. the only difference it's that instead on toggling the img visibility, for every div that it's in view, i want to make an call to an endpoint to retrieve the data and ppulate the html by sendind the corresponding data-id as a parameter.

what i have so far it's working only for the first item. how can i make it work for all the items that i have and target them by the data-id, similar to this example with data.src

function handleIntersection(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      entry.target.classList.add('loaded')
      observer.unobserve(entry.target);
    }
  });
}

here is my code

const LIST = document.querySelector('.city-list');
async function getData() {
  try {
    let response = await fetch('https://raw.githubusercontent.com/ashes27/infinite/master/ids.json');
    if (response.status == 200) {
      let data = await response.json();
      return data;
    } else {
      throw new Error(response.status);
    }
  } catch (error) {
    console.log(error);
  }
}

getData().then((data) => {
  for (const details in data.data.items) {
    const LI = document.createElement('li');
    const TITLE = document.createElement('h2');
    TITLE.className = 'city-title';
    TITLE.innerText = data.data.items[details].title;
    LI.appendChild(TITLE);
    LIST.appendChild(LI);
    for (const id in data.data.items[details].ids) {
      const DIV = document.createElement('div');
      DIV.setAttribute('data-id', data.data.items[details].ids[id]);
      DIV.className = 'wrapper';
      const markup = `
       <div class="city-wrapper" >
          <div class="result-wrapper">
            <div class="image-wrapper">
              <img src=""/>
            </div>
            <div class="content-wrapper">
              <div class="content-info">
                <div class="info-wrapper">
                  <h2></h2>
                  <span class="address"></span>
                </div>
              </div>
              <p class="description"></p>
              </div>
            </div>
          </div>
        </div>
      `;
      DIV.innerHTML = markup;
      LI.appendChild(DIV);
    }
  }
});

var observer = new IntersectionObserver(
  function (entries) {
    if (entries[0].isIntersecting === true) {
      observer.unobserve(document.querySelector('.city-list'));
      const getInfo = async function (post) {
        let infoResponse = await fetch('https://raw.githubusercontent.com/ashes27/infinite/master/single-item.json');
        let info = await infoResponse.json();
        return info;
      };
      getInfo().then((info) => {
        console.log(info);
        let itemsInfo = info.data.items;
        const DIV = LIST.querySelector('.wrapper');
        console.log(DIV);
        const markup = `
        <div class="city-wrapper" >
          <div class="result-wrapper">
            <div class="image-wrapper">
              <img src="${itemsInfo.mainImgUrl}"/>
            </div>
            <div class="content-wrapper">
              <div class="content-info">
                <div class="info-wrapper">
                  <h2>${itemsInfo.visitTitle}</h2>
                  <span class="address">${itemsInfo.address}</span>
                </div>
              </div>
              <p class="description">${itemsInfo.mainDescription}</p>
              </div>
            </div>
          </div>
        </div>
        `;
        DIV.innerHTML = markup;
      });
    }
  },
  { threshold: [0] }
);

observer.observe(document.querySelector('.city-list'));

.city-wrapper {
  height: 440px;
}

img {
  width: 400px;
}

 <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>
  <div style="height: 400px;"></div>

  <ul class="city-list">
  </ul>

thanks in advance!

You've told your [observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to watch for an intersection of `.city-list` with the viewport. But you want to know when any of th `li` elements in the list gets (or is about to get) visible. — Andreas, Jul 31 '20 at 12:54
Why `[0]` for the threshold? `0` is the default and you don't need an array if there's only one value — Andreas, Jul 31 '20 at 12:56

Andreas · Accepted Answer · 2020-08-04T15:41:09.310

You've told your observer to watch for an intersection of .city-list with the viewport. But you want to know when any of the .wrapper elements (the ones with the data-id) in the list gets (or is about to get) visible.

Therefor you have to .observe() these div.wrapper elements and not the complete list:

observer.observe(DIV);

To remove an element that has just become visible you have to use the target property of the current IntersectionObserverEntry:

observer.unobserve(entries[0].target);

The data-id you're looking for is also available through the same property:

const dataId = entries[0].target.dataset.id;

As we're going to "observe" multiple elements we have to adjust the logic accordingly:

entries.forEach(entry => {
  // ...
});

A complete, but slightly reduced (dummy data, no getInfo()) example:

const observer = new IntersectionObserver(
  function (entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting === true) {
        observer.unobserve(entry.target); // remove the current item from the "watchlist"
        console.log(entry.target.dataset.id); // the id you're looking for
      }
    });
  },
  { threshold: [0] }
);

async function getData() {
  // dummy data
  return Promise.resolve({
    data: {
      items: {
        city1: { title: "City 1", ids: [1, 2, 3] },
        city2: { title: "City 2", ids: [4, 5, 6] }
      }
    }
  })
};

getData().then((data) => {
  const LIST = document.querySelector('.city-list');
  
  for (const details in data.data.items) {
    const LI = document.createElement('li');
    
    const TITLE = document.createElement('h2');
    TITLE.className = 'city-title';
    TITLE.innerText = data.data.items[details].title;
    LI.appendChild(TITLE);
    
    LIST.appendChild(LI);
    
    for (const id in data.data.items[details].ids) {
      const DIV = document.createElement('div');
      DIV.setAttribute('data-id', data.data.items[details].ids[id]);
      DIV.className = 'wrapper';
      
      const markup = `<div class="city-wrapper" >...</div>`;
      
      DIV.innerHTML = data.data.items[details].ids[id] + "<br />" /* so the ID is directly visible */ + markup;
      LI.appendChild(DIV);
      
      observer.observe(DIV); // add the current DIV to the "watchlist"
    }
  }
});

.city-wrapper { height: 440px; }
img { width: 400px; }

<ul class="city-list"></ul>

Or here: https://jsfiddle.net/sDSJrPqw/L0wd6kja/5/

i've just saw something that is not working ok. if the element height is smaller and the first and the second item is visible on page, for the second element the function is not triggered, and if i scroll it goes to the third element, and only when i scroll top again the function is triggered for the second element too.. why is that? :( — coder, Aug 04 '20 at 14:08
and also if i scroll to the bottom and reload the page it doesn't get triggered for the last element until i scroll top... — coder, Aug 04 '20 at 14:11
@coder That's the way you've told your function to work: `entries[0].isIntersecting` you're always only testing the first observed element instead of every element in the list of `entries`. Use a loop and test every element in `entries` and it works. — Andreas, Aug 04 '20 at 15:37

Intersection Observer with lazy loading

1 Answers1