Intersection Observer API 不适用于隐藏元素答案

【问题标题】：Intersection Observer API not working with hidden elementsIntersection Observer API 不适用于隐藏元素
【发布时间】：2020-05-31 14:19:52
【问题描述】：

我正在尝试观察一个隐藏的元素。我有一个样式设置为display: none 的元素。我希望当我的元素相交时它会执行我的操作，即：播放视频。我在下面分享我的示例代码

 var options = {threshold: 0.5 }     

 var circle = document.getElementById('content_video');

 var observer = new IntersectionObserver(entries => {
     var [{ isIntersecting }] = entries
     if (isIntersecting) {
         player.play();
         player.ima.getAdsManager().resume();
     } else {
         player.ima.getAdsManager().pause();
     }
 }, options);

 window.addEventListener('load', () => {
     if ('IntersectionObserver' in window) observer.observe(circle);
 }, false);

【问题讨论】：

标签： javascript intersection-observer

【解决方案1】：

这是正常行为，因为带有display:none 的元素无法被浏览器访问并忽略

尝试设置其他样式而不是display:none。例如，使用 opacity 或 width 和 height 0 with overflow: hidden

【讨论】：

不幸的是，如果您的目标是使用交集观察器延迟加载媒体，这将无法达到目的，因为媒体将在与视口相交之前加载：/

【解决方案2】：

不幸的是，如果您的目标是使用交点观察器延迟加载媒体，那么答案将无法实现目的，因为媒体将在与视口相交之前加载。解决方案是确保它是被观察的媒体的包含元素，而不是被应用 display none 的元素。

https://codesandbox.io/s/react-lazyload-forked-yz93f?file=/src/LazyLoad.js:0-958

import React, { Component, createRef } from "react";

import "./styles.css";

class LazyLoad extends Component {
  observer = null;
  rootRef = createRef();
  state = {
    intersected: false
  };

  componentDidMount() {
    this.observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (entry.isIntersecting) {
          this.setState({ intersected: true });
          this.observer.disconnect();
        }
      },
      { root: null, threshold: 0.2 }
    );
    this.observer.observe(this.rootRef.current);
    console.log(this.rootRef);
  }

  render() {
    return (
      <div className="outer" ref={this.rootRef}>
        <span>{JSON.stringify(this.state.intersected)}</span>
        <div
          className={`container ${
            this.state.intersected ? "d-block" : "d-none"
          }`}
        >
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default LazyLoad;

【讨论】：