Music
高解像度画像を後読みするjQueryライブラリ [lazy-out.js]
2019.1.12 JS FrontEnd CSS Design

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>

次に&lt;img&gt;の 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で書きたかったです。

ありがとうございました。