Javascript 交叉点观察者API不使用隐藏元素

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

 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);

---

这是正常行为，因为浏览器无法访问并忽略显示为none的元素

---

尝试设置其他样式，而不是显示：无。例如，将不透明度或宽度和高度0与overflow:hidden一起使用这是正常行为，因为浏览器无法访问并忽略显示为none的元素

---

尝试设置其他样式，而不是显示：无。例如，将“不透明度”或“宽度和高度0”与“溢出：隐藏”（overflow:hidden）一起使用。不幸的是，如果您的目标是使用“交叉点观察者”（intersection observer）延迟加载媒体，则答案将无法达到目的，因为媒体将在与视口相交之前加载。解决方案是确保正在观察的是介质的包含元素，而不是正在应用display none的元素

---

不幸的是，如果您的目标是使用交叉点观察者延迟加载媒体，那么答案将无法达到目的，因为媒体将在与视口交叉之前加载。解决方案是确保正在观察的是介质的包含元素，而不是正在应用display none的元素

---

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

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;