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

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

関連記事

Twitterbootstrap3の開発環境構築とファイル配置、テンプレートを試す

概要 みなさんこんにちはcandleです。今回はtwitterbootstrap3のダウンロードを行い、ファイルを配置して、開発できる様に準備します。 twitterbootstrap3は最近リリース …

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

概要 railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、 それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。 …

pythonのfabricでファイルを分割しfabfileに読み込む方法

概要 皆さんこんにちはcandleです。今回はfabricで分割したpythonファイルを読み込んでみましょう。 fabricはfabfile.pyというファイルに実行したいコマンドを書くのですが、 …

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

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

ruby on railsのckeditor gemをapacheのproductionの本番環境で動かす

概要 みなさんこんにちはcandleです。今回はckeditorを本番環境で動かしてみたいと思います。 とは言っても基本的な記述はdevelopment環境と同じなので、そこまでは前回の記事を参照お願 …


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