image - before lazy load

by Joon Park

HTML

<div>
  <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 {
  render() {
  	const { src } = this.props;
    return <img src={src} />;
  }
}

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