スクロールしたときに画像を読み込むことでページの表示を高速化させる
2015/03/11
スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通常、ページを開いたときに画面に画像が表示されている/表示されていないにかかわらずすべての画像ファイルをダウンロードして表示します。
そのため、スマートフォンなどネットワークの速度が遅い環境では表示が遅くなり、せっかく見に来たのに表示されなくて離脱してしまうという大きな問題になります。
WordPressの初心者が独学でホームページ作成したときの技術メモ
2015/03/11
スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通常、ページを開いたときに画面に画像が表示されている/表示されていないにかかわらずすべての画像ファイルをダウンロードして表示します。
そのため、スマートフォンなどネットワークの速度が遅い環境では表示が遅くなり、せっかく見に来たのに表示されなくて離脱してしまうという大きな問題になります。
「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のスライダープラグインflexsliderですが、man …
カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …
スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …
サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …
新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …