React에서 이미지를 미리로드하는 방법

React에서 이미지를 미리로드하는 방법

환경
- react v16.8.6

React에서 이미지를 다룰 때 미리로드하고 부드러운 디스플레이를 만드는 방법을 살펴 보았습니다.

이미지 프리로드

jsx에 그리기 전에 Image 객체를 미리 생성합니다.

const img = new Image()

생성된 Image 객체에 이미지 경로를 전달합니다.
전달할 때 Image 객체는 프리로드를 시작합니다!

const src = "public/assets/sample.jpg"
img.src = src // ここでプリロードが始まる

onload에 콜백을 전달하여 로드가 끝나면 그리기를 할 수도 있습니다.

img.onload = () => { // 読み込み完了時に発火する関数
    this.setState({ preload: true }) // 例えばこんな風に
}

비포 애프터

미리 로드하거나 하지 않는 경우에 어떤 차이가 있는지 살펴보겠습니다.
버튼을 누르면 이미지가 표시되는 구성 요소를 만들었습니다.
이미지는 unsplash에서 무거운 것들을 선택했습니다.

비포

import React, { Component } from 'react';

const imgPath = 'https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
    // const img = new Image()
    // img.src = imgPath
  }

  render () {
    const { show } = this.state
    if (show) {
      return (
        <div>
          <img style={{ width: '100%', height: '100%'}} src={imgPath} alt='sample image' />
        </div>
      )
    }
    else {
      return (
        <div>
          <button type="button" onClick={() => this.setState({ show: true })} >show image</button>
        </div>
      )
    }
  }
}

버튼을 누르면 이미지 로드가 시작됩니다.




로드될 때까지 새하얀 화면이 표시됩니다.

애프터

import React, { Component } from 'react';

const imgPath = 'https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
    const img = new Image()
    img.src = imgPath // プリロードする
  }

  render () {
    const { show } = this.state
    if (show) {
      return (
        <div>
          <img style={{ width: '100%', height: '100%'}} src={imgPath} alt='sample image' />
        </div>
      )
    }
    else {
      return (
        <div>
          <button type="button" onClick={() => this.setState({ show: true })} >show image</button>
        </div>
      )
    }
  }
}

그리기 전부터 읽어들입니다.


캐시를 이용하므로 신속하게 그릴 수 있습니다.


이상입니다.
더 좋은 방법이 있다면 교수 부탁드립니다 mm