檢查元素是否在視口中並將其傳遞給函數

Question

我有一個元素列表，它們是延遲加載的。 現在我想一個接一個地解析它們。 因此我必須確定它們是否在視口中。 當它們存在時，我想將它們傳遞給另一個函數來解析它們。

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ul>

現在，當我滾動時，我想檢查元素是否在視口（已加載）中，當它在時，我想將它傳遞給我的解析函數。

解析：

parseItem() {
        const url = article.getElementsByClassName('js-listitem')[0].getElementsByTagName('a')[0].href;
        const title = article.getElementsByTagName('h2')[0].innerText;
        // do stuff...
      }

我怎樣才能做到這一點？

Answer 1

您可以在文檔上使用onload事件來檢查文檔何時加載：

document.onload = function() {
  parseItem();
}

Answer 2

我最終使用了MutationObserver 。 這樣我就可以觀察元素是否被加載： https : //developer.mozilla.org/en-US/docs/Web/API/MutationObserver