LazyLoad 2018.10版 画像の遅延読み込みで爆速表示！

Webサイトやブログに大量の写真を載せたい時がありますよね。
例えば、これ
www.shibomb.xyz とか、これ
www.shibomb.xyz

通常のWebページは「画像ファイルを全部読み込みきってから、本文も含む全てを画面に描画する」という形ですので、大量の写真や画像のある記事を作成した場合、画像読み込み待ちになってしまい
表示が遅い！
とお叱りを受けることになります・・・
ですので、その対策として画像ファイルを「ちょっと遅らせて読み込む」という方式に変更してみます。

LazyLoad

このようなページロード時間短縮のためのテクニックを LazyLoad (遅延読込) と言います。 JavaSciriptライブラリがありますので、それを導入していきましょう。

本記事は「はてなブログの記事編集はMarkdownモード前提」で記載しておりますが、他のウェブサイト、ブログサービスや Wordpress などでも応用できます。

LazyLoadライブラリの読み込み設定

ブログ全体でLazyLoadライブラリを読み込むように設定します。
初回だけの作業です。

Step 1. 管理画面 > デザイン > カスタマイズ > フッタのテキスト領域をクリックして編集できるようにします。

Step 2. フッタに下記のコードを記述します。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
<script>
  $("img.lazyload").lazyload()
</script>
<style>
img.lazyload[src] {
    animation: fadeIn 1.0s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.0s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
</style>

Step 3. 画面上部の「変更を保存する」ボタンをクリックします。

（HTMLとしては、bodyタグの後ろの方に記述されることになります。）

記事内のLazyLoadしたい画像の書き方

記事内の画像リンクを、すべて下記のように記述します。

<img class="lazyload" data-src="画像ファイルのパス" />

はてなブログのはてな記法ですと下記のように変換する必要があります。

例）上述のStep 1.の画像の場合:
[f:id:shibomb:20181024165934p:plain]
↓
<img class="lazyload" data-src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shibomb/20181024/20181024165934p.png" />

記事内の一括置換の方法

同一日にアップロードした画像を使う記事であれば、テキストエディタなどで一括変換が可能です。
Step 1. まずは普通に Markdown形式で画像を配置して、記事を書き上げます。
Step 2. 記事全体のテキストをコピーし、テキストエディタに貼り付けます。
Step 3. 一括置換します。(パスは画像を右クリックするなどして調べておいてください。)

• [f:id:[ユーザーID]: を <img class="lazyload" data-src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/[ユーザーID]/[年月日文字列]/ に置換します。
• p:plain] を .png" />に置換します。
• j:plain] を .jpg" />に置換します。

Step 4. 置換後のテキスト全体をコピーして、はてなブログの記事に全体貼り直しします。

確認方法

記事を保存して、記事を表示してみたときに該当の画像が「ふわ〜」とフェードインされたら効いてます！

心配でしたらページ表示直後に開発ツールなどでHTMLをチェックしてみましょう。
imgタグの data-src を見つけて、注目しておいて、記事をスクロールすると画像が表示されそうな位置までスクロールされたら data-src が src に切り替わるはずです。