3/3 閲覧者がスクロールするまで画像の読み込みを待つ方法 [ホームページ作成] All About

スクリプトが実行できない環境への対処

JavaScriptが実行できない環境は最近ではあまりないでしょうが、そのような環境にも対処しておきたい場合には、以下の方法があります。

■STEP.1 noscript要素を追加
まず、先ほどご紹介したdata-original属性を使った特殊なimg要素に続いて、noscript要素を使って通常のimg要素も併記します。例えば、以下のようにです。

<img src="ダミー画像" data-original="本来の画像" class="lazy" width="764" height="510" alt="写真1">
<noscript><img src="本来の画像" width="764" height="510" alt="写真1"></noscript>

これによって、スクリプトが実行できない環境では、noscript要素の中身(本来の画像を表示するimg要素)が表示されます。

■STEP.2 CSSを追加
上記だけだと、(スクリプトが実行できない環境では)ダミー画像と本来の画像の両方が見えてしまいます。それを防ぐために、以下のスタイルシートを記述します。

img.lazy {
   display: none;
}

■STEP.3 JavaScript(jQuery)ソースを修正
上記のCSSによって、ダミー画像は表示されなくなります。しかし、このままだと、スクリプトが実行可能な環境では何も表示されなくなってしまいます。そこで、lazyloadメソッドを実行する記述を以下のように修正します。

<script type="text/javascript">
   $(function() {
      $("img.lazy").show().lazyload();
   });
</script>

これによって、非表示状態になっている対象を表示してから、lazyloadメソッドが実行されるようになります。

上記のSTEP.1～3のように記述することで、スクリプトが実行できない環境では、最初からすべての画像が読み込まれる(表示される)ようになります。

閲覧者がクリックするまで読み込まないようにする

「Lazy Load Plugin for jQuery」を実行するスクリプト部分にオプションを追記することで、閲覧者がダミー画像をクリックするまで、本来の画像を読み込まないようにもできます。

HTMLの末尾に記述していたソースを以下のように修正します。

<script type="text/javascript">
   $("img.lazy").lazyload({
      event : "click"
   });
</script>

こうすると、ダミー画像がクリックされない限り、本来の画像は表示されません。

画面外の画像はクリックされるまで表示されないサンプルページ

上記のソースを使ったサンプルページを用意していますので、実際にブラウザでアクセスして、動作を試してみて下さい。

スクロールせずに見える範囲内に収まっている画像は、最初から読み込まれて表示されます。しかし、それ以降の画像は(スクロールしても)ダミー画像のままです。ダミー画像をクリックすると、クリックした箇所の画像だけが読み込まれます。

画像を最初から全部は読み込まないようにして、ダウンロード量を減らす

今回は、「閲覧者がスクロールするまで画像を読み込まない」ようにするスクリプト「Lazy Load Plugin for jQuery」の使い方をご紹介致しました。画像の掲載数が多く、最初の1画面よりも後にたくさん画像が出てくるようなページで、閲覧者の読み込み待ちストレスを軽減させるために、ぜひ、試してみて下さい。

【関連記事】