react-lazyloadを使って画像を遅延ロードをする

概要

みなさんこんにちはcandleです。今回はreact-lazyloadを使って画像の遅延読み込みをしてみましょう。SPAにおける問題は最初の読み込み時の遅さです。その中でも画像が多いサイトになるとさらに遅くなります。そこで、react-lazyloadを使って画像の読み込みを遅延させましょう。

前提

なし

準備

すでにReactのプロジェクトがある方はそちらを利用してください。
ない場合は下のコマンドで作成します。

create-react-app imageloader-sample
cd imageloader-sample

サンプル用の画像はFaker.jsで用意しますので、それをインストールします。

yarn add faker

準備ができました。

サンプルコードの作成

src/App.jsを開いて以下のようにします。

import React, { Component } from 'react'
import Faker from 'faker'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [],
    }
  }
  componentWillMount() {
    for (let i = 0; i < 30; i++) {
      const user = {
        name: Faker.internet.userName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
      }
      this.setState(prevState => ({
        users: [...prevState.users, user],
      }))
    }
  }

  renderUsers(user) {
    return (
      <div style={{ border: 'solid 1px #eee' }}>
        <img src={user.avatar} alt={user.name} width="50" height="50" />
        <h4>Name: {user.name}</h4>
        <h4>Email: {user.email}</h4>
      </div>
    )
  }

  render() {
    return <div>{this.state.users.map(user => this.renderUsers(user))}</div>
  }
}

export default App

これを実行するとこのような画面になります。

画像を30個ほどロードする画面になっています。

React-lazyloadを使う

まずはreact-lazyloadをインストールします。

yarn add react-lazyload

src/App.jsを開いて以下のようにします。

import React, { Component } from 'react'
import Faker from 'faker'

import LazyLoad from 'react-lazyload'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [],
    }
  }
  componentWillMount() {
    for (let i = 0; i < 30; i++) {
      const user = {
        name: Faker.internet.userName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
      }
      this.setState(prevState => ({
        users: [...prevState.users, user],
      }))
    }
  }

  renderUsers(user) {
    return (
      <div style={{ border: 'solid 1px #eee' }}>
        <LazyLoad width="50" height="50" once>
          <img src={user.avatar} alt={user.name} width="50" height="50" />
        </LazyLoad>
        <h4>Name: {user.name}</h4>
        <h4>Email: {user.email}</h4>
      </div>
    )
  }

  render() {
    return <div>{this.state.users.map(user => this.renderUsers(user))}</div>
  }
}

export default App

するとこのように、必要最低限の画像のみがロードされて、それ以外は遅延ロードされます。

うまくいきましたね。

まとめ

画像が多いサービスでは画像の遅延ロードは絶対にやった方が良いので是非試してみましょう。