スクロールしたときに画像を読み込むことでページの表示を高速化させる

 

「Lazy Load Plugin for jQuery」を使う

「Lazy Load Plugin for jQuery」を使えば、画面に表示されてない画像はまだダウンロードさせず、画面をスクロールして画面に入ってきて初めてダウンロードされます。そうすることでページの表示スピードを改善できます。

 

使ってみよう

さっそくここから jquery.lazyload.min.js ファイルダウンロードします。

組み込み準備

<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
    $(function() {
        $("img").lazyload({
            effect: "fadeIn"
        });
    });
</script>

Lazy Load の読み込み部はこんな感じ。あとは画像を組み込んでみる。

 

画像部を組み込み

<img class="lazy" src="dummy.jpg" data-original="original.jpg">

dummy.jpg：
読み込み完了するまでに一時的に表示される画像です。真っ白とかで使いまわしたらOK。

original.jpg：
実際表示させる画像を指定。

あとは クラスに”lazy”を指定すれば完了。

 

オプションもいろいろ

上記ではオプションに ボワッと表示されるエフェクト”effect:fadeIn” を指定しています。そのほかオプションなどは公式サイトから確認してみましょう。英語ですが。

 

 - jQuery

  関連記事