joppot

コピペで絶対動く。説明を妥協しない

プログラミング

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

投稿日:2018年12月3日 更新日:


概要

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

前提

なし

SPONSORED LINK

準備

すでに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

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

うまくいきましたね。

まとめ

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

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

grepコマンドを使って正規表現を色々試してみるその1

概要 みなさんこんにちはcandleです。今回からgrepコマンドを使って正規表現を色々試してみます。 正規表現って、使えると便利ですが、それを勉強して使いこなせている人って少ないと思います。この機会 …

MAMPにCakePHPを導入して動かす

概要 みなさんこんにちはcandleです。今回はMAMPでCakePHPを動かす環境設定を行いましょう。 条件 MAMPがインストールされている CakePHPをダウンロードする 下のCakePHPの …

ruby on railsのgemのインストールで不要なファイルをインストールしない設定

概要 みなさんこんにちはcandleです。私の記事はどうしても先人のプログラマーがまとめた内容を追試しているような感じになっていますが、これも重要なことなので、忘れないためにもまとめておきます。 ru …

railsのform_forとstrong parametersを使用してpdfをアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリにpdfファイルをアップロードしてみましょう。 form_forは …

memcachedサーバとruby on railsのdalliを使用してセッションを管理する

概要 みなさんこんにちはcandleです。今回はmemcachedサーバを利用してrailsのセッションを管理してみたいと思います。 一般にrailsでセッション管理をしていると、ブラウザのcooki …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー