スクロールに合わせて画像を読み込むjQuery Image Lazy Load WP記事更新日2013年1月13日

ワードプレスのサイトで、ページの読み込み速度が気になることありませんか?

今回ご紹介する「jQuery Image Lazy Load WP」プラグインは、
ページスクロールにあわせて画像を読み込むようにしてくれるプラグインです。

見えない部分の読み込みは後回しにして表示される領域だけ体制が整ったところで
サイトが表示できるようになるので、ページ読み込み時間が短縮されます。

訪問者がスクロールして下に読み進めるにつれ、その都度必要領域の画像を読み込む仕組み。
しかも、画像が表示される時は「ふわっ」としたエフェクトがかかるので、
見た目もなんだかおしゃれになります。

プラグインの使い方

プラグインをインストールして有効化します。

特に他に設定は必要ありませんが、
このままだと、サイドバーの画像まで読み込みが後回しになってしまってページの最後まで読み進めないと画像が表示されないことがあります。
これは「コンテンツ」→「サイドバー」の順番にコードが書かれていて、
プラグインは上からコードを読んでいくためおこります。

その回避法に関しては、こちらのサイト

Query Image Lazy Load WP – コンテンツ部分以外の画像にフェード効果をつけない – あんとんさんちさん

で詳しく解説されていたのでご参照ください。

画像が多いサイトほどプラグインの効果がわかりやすいので、サイト読み込みスピードが気になった方ぜひ試してみてください。