0

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

我使用交叉点观察者 api 方法延迟加载图像。不知道如何为 html 元素执行此操作。

4

1 回答 1

0

是的，您可以将内容延迟加载到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>

于 2019-05-30T10:06:40.963 回答