WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

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

      2015/03/11

スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通常、ページを開いたときに画面に画像が表示されている/表示されていないにかかわらずすべての画像ファイルをダウンロードして表示します。

そのため、スマートフォンなどネットワークの速度が遅い環境では表示が遅くなり、せっかく見に来たのに表示されなくて離脱してしまうという大きな問題になります。

スポンサーリンク

 

「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

  • このエントリーをはてなブックマークに追加

  関連記事

thum_jquery
jScrollPaneをレスポンシブ対応する

スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …

thum_jquery
flexsliderのmanualControlsを使ってサムネイルと連動させる

便利で有名なjqueryのスライダープラグインflexsliderですが、man …

thum_jquery
ページ内リンクをスムーズスクロール

サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …

thum_jquery
flexslider2のカルーセルをレスポンシブ対応する

カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …

thum_jquery
スクロールバーをかっこよくデザインする

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …