lazy-out.js というスクリプトを作りました。
スクロールによる”Lazy Load”を簡単に実装できます。
“Lazy Load”というのはあらかじめ低解像度画像(Lazy-image)を読み込んで置いて、スクロールで可視範囲に入った時などに高解像度画像に置き換えるというものです。
サイズを縮小した低解像度画像を読み込んで都度置き換えていくので、ページ自体のリソースを少なくすることができます。
ちなみに僕みたいな素人が書きました。JS歴は10年ぐらいなんですが、自分で一回もまともに書いたことありません。
仕組みとして、jQueryで<img> の srcをイベントによって書き換えています。
GitHubにおいてありますので、どうにでもこうにでもしてください。
kurogedelic / lazy-out.js
DEMOも置いてあります。
DEMO
使い方
まず<body>タグの終了直前でjQueryとlazy-load.jsを読み込みます。
jQueryのバージョンは3.x以上が推奨です。1.xや2.xでも動くかもしれませんが、やってません。
<script src="jquery.min.js"></script>
<script src="lazy-out.min.js"></script>
CDNにもあります。
<script src="https://cdn.rawgit.com/kurogedelic/lazy-out.js/36bebd03/dist/lazy-out.min.js"></script>
次に<img>の data attributes に必要事項を書き込みます。
data-orig-file でオリジナルファイルのURLを指定します。
data-lazy-src でLazyファイルのURLを指定します。
data-orig-size でオリジナルファイルのサイズを指定します。
data-orig-sizeは記入しなくとも動作します。
この場合は初めに読み込まれる画像のサイズで表示されます。
<img
class="lazy"
data-orig-file="img/photo-original.jpg"
data-orig-size="1200,588"
data-lazy-src="img/photo-lazy.jpg" >
動作
ページをロードした時、DOMではこう見えます,
<img class="lazy" src="img/photo-lazy.jpg" width="1200" height="588">
<img>にsrcが指定されている場合は消去されます。
指定した<img>要素が閾となる高さまでくると次のように書き換えられます。
<img class="lazy-done" src="img/photo-original.jpg" width="1200" height="588">
設定
lazy-load.jsの頭に設定用のJSONが書き込まれています。
| Name | Type | Default | Description |
|---|---|---|---|
| “lazySrc” | string | lazy-src | Lazy image URL |
| “originalSrc” | string | orig-file | Original image URL |
| “originalSize” | array | orig-size | Original image size |
| “threshold” | numeric | 300 | Threshold level from page-top |
WordPressで使うには
そもそもこのスクリプトはこのサイトのために作りました。
記事内の画像についてはJetpackプラグインの「Lazy Load」を使用することによってdata attributesが自動で書き込まれます。しかも .lazyも一緒に付けられるため何もしなくても大丈夫です。
そのほかのページ（例えば記事一覧ループの中など）では、PHPでdata attributesにURLを書き込むと実装できます。
Example;
<img
class="lazy"
data-orig-file="<? echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>"
data-lazy-src="<? echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>" >
wp_get_attachment_image_srcを使えば、data-orig-sizeのためにサムネイルのサイズも取得できます。
以上です。
あくまでも僕みたいなんが作ったやつなので、自己責任でお願いします。
「ここはこう書けよ！」みたいなんがあれば是非教えていただきたいです！！
Wordpressで使うことを想定していたのでjQueryで書いてますが、本当はVanillaJSで書きたかったです。
ありがとうございました。
