具有延遲加載的交叉口觀察器

Question

我想從這個例子中用圖像https://codepen.io/ryanfinni/pen/jONBEdX實現這種行為。 唯一的區別是，在切換 img 可見性時，對於它在視圖中的每個 div，我想調用端點以檢索數據並通過發送相應的數據 ID 作為參數來填充 html。

到目前為止，我所擁有的僅適用於第一項。 我怎樣才能使它適用於我擁有的所有項目並通過 data-id 定位它們，類似於這個帶有 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);
    }
  });
}

這是我的代碼

 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>

提前致謝！

Answer 1

您已經告訴您的觀察者注意.city-list與視口的交集。 但是您想知道列表中的任何.wrapper元素（具有data-id的元素）何時（或即將）可見。

因此，您必須.observe()這些div.wrapper元素，而不是完整列表：

observer.observe(DIV);

要刪除剛剛變得可見的元素，您必須使用當前IntersectionObserverEntry的target屬性：

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

您正在尋找的data-id也可以通過相同的屬性獲得：

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

當我們要“觀察”多個元素時，我們必須相應地調整邏輯：

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

一個完整但略微減少的（虛擬數據，沒有getInfo() ）示例：

 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>

或在這里： https://jsfiddle.net/sDSJrPqw/L0wd6kja/5/