2019年7月4日木曜日

Lazyload2.0 を使ってみた

概要
環境
準備
Lazyload 2.0 を追加
custom.js
動作確認
Lazyload が使われているかよくわからない場合には
最後に
参考サイト

概要

Lazyload はブラウザで画像の遅延ダウンロードを実現することができるライブラリです
画面上に初めて画像が表示されたときにロードを行うことができたりします
また 2.0 から jQuery 経由の実行は禁止されネイティブの JS で動作するようになったのでそれを試してみます

環境

macOS 10.14.5
Ruby 2.6.2p47
Lazyload 2.0

準備

今回は Ruby を使ってアプリを作成します

アプリ雛形作成

bundle init
vim Gemfile

gem "sinatra"

bundle install --path vendor
mkdir views
touch views/index.erb
mkdir -p public/js
touch public/js/custom.js
touch app.rb

アプリ作成

vim app.rb

require 'sinatra'

get '/' do
  erb :index
end

テンプレート作成

vim views/index.erb

<html>
<head>
</head>
<body>
  <p><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"/></p>
  <p><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"/></p>
  <p><img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png"/></p>
  <p><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.bmp"/></p>
  <p><img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png"/></p>
</body>
</html>

適当に画像を表示するテンプレートを作成しましょう

Lazyload 2.0 を追加

まずはテンプレートに Lazyload を追加します
CDNがあるのでそれを使います

vim views/index.erb

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
  <script src="/js/custom.js"></script>
</head>
<body>
  <p><img class="lazyload" width="400" height="400" data-src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"/></p>
  <p><img class="lazyload" width="400" height="400" data-src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"/></p>
  <p><img class="lazyload" width="400" height="400" data-src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png"/></p>
  <p><img class="lazyload" width="400" height="400" data-src="https://homepages.cae.wisc.edu/~ece533/images/barbara.bmp"/></p>
  <p><img class="lazyload" width="400" height="400" data-src="https://homepages.cae.wisc.edu/~ece533/images/boat.png"/></p>
</body>
</html>

jQuery は Lazyload では使いませんが DOM の読み込みに使うので追加します
また各 img タグに class="lazyload" を追加します
そして src を data-src に変更し画像のサイズも必須なので指定します
これを行った img タグに関しては遅延ロードの対象になります

custom.js はこの後作成します

custom.js

DOM が描画されたら lazyload() メソッドをコールする処理を実装します

vim public/js/custom.js

$(document).ready(function(){
  lazyload();
});

動作確認

準備ができたので動作確認してみましょう

bundle exec ruby app.rb

localhost:4567 にアクセスすると画像が表示されます
Lazyload を使った場合はスクロールするごとに画像が読み込まれていることがわかります

Lazyload が使われているかよくわからない場合には

プレースホルダーが使えるのでそれを使ってみましょう
要するにダウンロード中は別の読み込み画像を見せることができます
今回は事前に public/img/dummy.png に配置しています
それを src 属性を使って指定することでプレースホルダーとして使えます

vim views/index.erb

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
  <script src="/js/custom.js"></script>
</head>
<body>
  <p><img class="lazyload" width="400" height="400" src="/img/dummy.png" data-src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"/></p>
  <p><img class="lazyload" width="400" height="400" src="/img/dummy.png" data-src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"/></p>
  <p><img class="lazyload" width="400" height="400" src="/img/dummy.png" data-src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png"/></p>
  <p><img class="lazyload" width="400" height="400" src="/img/dummy.png" data-src="https://homepages.cae.wisc.edu/~ece533/images/barbara.bmp"/></p>
  <p><img class="lazyload" width="400" height="400" src="/img/dummy.png" data-src="https://homepages.cae.wisc.edu/~ece533/images/boat.png"/></p>
</body>
</html>

プレースホルダー実行後は以下のように Lazyload が使われているのがよくわかります

最後に

Lazyload2.0 を使ってみました
ライブラリを追加して既存のタグに class と data-src 属性を追加すれば使えるので簡単に導入できそうです
画像がたくさんあり一気に読み込むことでページのロードが重くなっている場合などは導入を検討してみると良いかなと思います

hawksnowlog