API-интерфейс Intersection Observer не работает со скрытыми элементами

Я пытаюсь увидеть скрытый элемент. У меня есть элемент со стилем 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
person Mufasil    schedule 31.05.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Это нормальное поведение, поскольку элемент с display:none недоступен и игнорируется браузером.

Попробуйте вместо этого установить другие стили display:none. Например, используйте непрозрачность или ширину и высоту 0 с переполнением: скрыто

person DMITRYTISHKIN    schedule 31.05.2020
comment
К сожалению, если ваша цель - использовать наблюдатель пересечения для ленивой загрузки мультимедиа, это не выполнит задачу, так как мультимедиа загрузится до того, как пересечется с окном просмотра: / - person OctaviaLo; 05.05.2021

arrow_upward
0
arrow_downward

К сожалению, если ваша цель - использовать наблюдатель пересечения для ленивой загрузки мультимедиа, ответ не будет соответствовать цели, поскольку мультимедиа загрузится до того, как пересечется с окном просмотра. Решение состоит в том, чтобы убедиться, что наблюдается именно содержащий элемент носителя, а не элемент, к которому не применяется отображение.

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;
person OctaviaLo    schedule 05.05.2021