概要
みなさんこんにちは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
するとこのように、必要最低限の画像のみがロードされて、それ以外は遅延ロードされます。
うまくいきましたね。
まとめ
画像が多いサービスでは画像の遅延ロードは絶対にやった方が良いので是非試してみましょう。