CODEWITHSUNDEEP
javascriptintersection-observer
Mufasil
Mufasil

Reputation: 231

Intersection Observer API not working with hidden elements

I am trying to observe a hidden element. I have an element which has style set to display: none. I want when my element intersect it will perform my action i.e: Play the video. I am sharing my sample code below

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

Upvotes: 3

Views: 10188

Answers (2)

OctaviaLo
OctaviaLo

Reputation: 1396

Unfortunately if your goal is to use the intersection observer to lazy load the media, the answer will not fulfil the purpose since the media will load before it intersects with the viewport. The solution is to make sure it is the containing element of the media that is being observed, instead the element on which display none is being applied.

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;

Upvotes: 1

DMITRYTISHKIN
DMITRYTISHKIN

Reputation: 526

This is normal behaviour, because element with display:none cannot be reached and ignoring by browser

Try set other styles instead display:none. Example, use opacity or width and height 0 with overflow: hidden

Upvotes: 8

Related Questions