スクロールしないと見えない画像を読み込まない方法

梅雨明けました？夏本番ですね。

はかるだけダイエット継続中です。先日、ふと気づけば目標を達成してました。

今年は病気になったので、食べる量を減らすどころか増やさなければならなかったので、だいぶ遅れましたが。

パケットを減らしたい

さて、画像のギャラリーとかでたくさんサムネイル画像が並んでいると、ページの読み込みがなかなか終わらなかったりしますよね。スクロールして全部見るかどうかわからないのに特にスマートフォンでは無駄にパケットを消費してしまいます。

そこで、ウィンドウに表示される前の画像を読み込まない、もしくは画像の読み込みを遅らせる方法を探してみました。

最初に考えたのは、オブジェクトを隠すスタイルシートです。

画像や要素を隠すために、CSSで「display:none;」というのがあります。

img {
  display:none;
}

ブラウザ表示上はなかったことにできるのですが、読み込まない欲しいなと願望を込めて調べてみましたが、表示されなくてもバックグラウンドで読み込まれるそうです。

ただし、<img>要素ではなく、背景画像にした場合、読み込まれない場合もあるようです。それも一つの選択肢かもしれませんね。

参考

さらにjQueryのプラグインを探してみました。その中の一つにというかほぼ1択という感じで見つかったのが「Lazy Load」です。

画像の読み込みを遅らせることができるプラグインです。

しくみはプレイスホルダーという仮の画像を先に設定しておいて、

スクロールして上に上がってきたときに,

本来の画像と差し替えるようになっているみたいです。

仮の画像は1枚あればいいので、最初の読み込みでは時間がかかりません。

スクロールして、画面上に現れると、本来の画像を読み込みます。

つまし、スクロールしない限り、まだ画面の下のほうにある画像は読込まれません。

基本的なコードの書き方はこんな感じです。
jQueryのライブラリの読み込みは省略しますね。

<script src=“jquery.lazyload.min.jsのパス”></script>
<script>
$(function() {
 $("img.lazy").lazyload();
});
</script>

<img src=“プレイスホルダーのパス”  data-original=“本来の画像のパス”>

ちょっと面倒なのは、HTMLを書き換えなければいけないことがちょっと違和感を感じますね。

imgは仮の画像をimgのsrc属性に設定し、本来の画像のパスは、data-originalという属性に格納します。

実際に読み込まれていないかインスペクタで調べてみました。

src属性が途中で変わっているのがわかりますね。

上側二つのsrc属性がdata-original属性の値に上書きされていて（画面内に表示されている）、下側二つはまだ仮の画像(placeholder.gif)のままです。

Lazy Loadを使ったサンプルを作ってみました。

今回、こちらのページを参考にさせていただきました。