image - after lazy load

by Joon Park

HTML

<div class="container">
  <p>SCROLL DOWN FOR IMAGE</p>
  <p>some content 15</p>
  <p>some content 14</p>
  <p>some content 13</p>
  <p>some content 12</p>
  <p>some content 11</p>
  <p>some content 10</p>
  <p>some content 9</p>
  <p>some content 8</p>
  <p>some content 7</p>
  <p>some content 6</p>
  <p>some content 5</p>
  <p>some content 4</p>
  <p>some content 3</p>
  <p>some content 2</p>
  <p>some content 1</p>
  <div id="app"></div>  
</div>

CSS

.container {
  border: 1px solid black;
  height: 300px;
  overflow: auto;
}

React

class Image extends React.PureComponent {
	componentDidMount() {
    this.observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          const { isIntersecting } = entry;

          if (isIntersecting) {
            this.element.src = this.props.src;
            this.observer = this.observer.disconnect();
          }
        });
      },
      {
      	root: document.querySelector(".container"),
        rootMargin: "0px 0px 100px 0px"
      }
    );

    this.observer.observe(this.element);
  }

  render() {
    return <img ref={el => this.element = el} />;
  }
}

ReactDOM.render(<Image src="https://via.placeholder.com/300x300" />, document.querySelector("#app"));