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

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

関連記事

Rails pluginを使ったgemの作り方[4](controller helper編)

概要 みなさんこんにちはcandleです。今回はgemの中枢とも言えるhelperの作り方です。 helperというのは様はgemにすることで便利になる関数を作るとというイメージです。 例えば、con …

Hiragino Sansフォントウェイトのcss書き方まとめ

概要 みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。 Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。 一方で …

React webでreact-simple-formatを使う

概要 みなさんこんにちはcandleです。今回はreactでsimple-formatを使ってみたいと思います。simple-formatは割とRuby on Railsでは有名で、よく使われます。R …

Rails pluginを使ったgemの作り方[1](基本設定編)

概要 みなさんこんにちはcandleです。今回からできればシリーズ物として、railsのgemを作っていこうと考えています。なぜかgemの作り方の詳しい解説サイトが日本語で少ないので未だgemを満足に …

Rails pluginを使ったgemの作り方[3](vendor/assets 読み込み編)

概要 みなさんこんにちはcandleです。今回はgemでvendorを作成し、それをrailsアプリケーション側で読み込ませる為の方法を紹介します。 よく、gemをインストールすると「app/asse …


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