WordPressのコンテンツ画像を後読みさせて表示を適正化〜jQuery Image Lazy Load WP導入

前回の「WordPressのヘッダ画像を先読みさせて表示を適正化」にムリムリ続けたタイトルですが、”jQuery Image Lazy Load WP”はブラウザ表示エリア部分の画像だけ先んず読み込み、残りのコンテンツ画像はスクロールに合わせて順次読み込んでくれるプラグイン。

インストール後有効化すればあとは効果を確認するだけのお手軽設定です。

記事ページの表示が早くなる(記事全体の読み込みが完了するわけではない)ばかりでなくカテゴリー別記事一覧やアーカイブ記事一覧、検索結果等でのページあたりサムネイル記事表示件数を気にせず設定(ほぼ全件表示に改修)できるようになりました。

ただオリジナルのままだとサイドバーに設定している画像やウイジェットが後読み対象になってグレー表示になったり表示が遅かったりという不具合も出たりします。

[browsershot url="http://antonsan.net/2012/0220184847" width="200"] jQuery Image Lazy Load WP – コンテンツ部分以外の画像にフェード効果をつけない | あんとんさんち

ちゃんと対策を考えてくれてたヒトがいました♪

プラグイン本体”jquery-image-lazy-loading/jq_img_lazy_load.php”の27行目を修正します。

  jQuery("img").not(".cycle img").lazyload({
→ jQuery("#content img").not(".cycle img").lazyload({

”#content”部分はテーマ設定のメインインデックス・単一記事ページでの(記事表示部分の)コンテンツ属性に合わせて変更する必要があります。

ブラウザスクロールしたときに表示される後読み画像にフェードイン効果が加えられていて使い心地もなかなかGOODです。