如何使用 intersection-observer 延迟加载 html div 标签？

Question

是否可以使用 Intersection Observer API 延迟加载整个 div 标签？

我使用交集观察器 api 方法延迟加载图像。不确定如何为 html 个元素执行此操作。

Answer 1

是的，您可以将内容延迟加载到 divs。下面的示例简单地使用 html() 在相交处用随机字符串填充 div。如果您想要的内容是一个单独的 html 页面，您可以使用 load() 代替。

function lazyDivs() {
  let lis = [].slice.call(document.querySelectorAll("div.lazy")),
    items = ["Aruba", "Jamaica", "Bermuda", "Bahama", "Key Largo", "Montego"];

  if (!lis.length) {
    //do nothing
  } else if ("IntersectionObserver" in window) {
    let o = new IntersectionObserver(function(es, obs) {
      es.forEach(function(e) {
        if (e.isIntersecting) {
          let li = $(e.target);
          li.html(items[Math.floor(Math.random() * items.length)]);
          //li.load('/path/to/html/fragment'); //option to load content from a separate page
          li.removeClass("lazy");
          o.unobserve(e.target);
        }
      });
    });
    lis.forEach(function(li) {
      o.observe(li);
    });
  } else {
    lis.forEach(function(li) {
      let l = $(li);
      l.html(items[Math.floor(Math.random() * items.length)]);
      //l.load('/path/to/html/fragment'); //option to load content from a separate page
      l.removeClass("lazy");
    });
  }
}

$(document).ready(function() {
  lazyDivs();
});

div {
  border: 1px solid blue;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
  <div class="lazy"></div>
</body>

</html>

如何使用 intersection-observer 延迟加载 html div 标签？

How to lazy load html div tags using intersection-observer?

javascript

jquery

intersection-observer