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>

如何使用交集观察器延迟加载html div标签？

1 个答案: