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です。