画像の表示を「ふわっ」とした感じにゆっくりと表示してくれるワードプレスのプラグインLazy Load。
バグではないのですが、記事の部分はちゃんと動作してサイドメニュー部分だけがスクロールしても画像が表示されないままになってしまう不具合が起こる事があります。
一度画面の最下部までスクロールした後にはサイドバーにも画像が表示されるようになるんですが、これでは使えないですね。
この症状は『jq_img_lazy_load.php』というファイルを変更することで解決できます。
下記の1,2どちらでも変更が可能です。
- 管理画面上から「jQuery lazy load plugin」の編集で『jquery-image-lazy-loading/jq_img_lazy_load.php』を選択して変更
- FTPから『wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php』をダウンロードして編集
- jq_img_lazy_load.phpのコード内にあるここ
-
jQuery(“img”).lazyload({
ここのimg部分に、Lazy Loadを有効化したいブロック(div)を指定します。
コンテンツ部分のみ有効化させて、サイドメニューやフッター部分は有効化させない事にします。
このブログを例にすると・・・
- 記事コンテンツのブロックは“entry”なのでこう変更します。
-
jQuery(“.entry img”).lazyload({ - “entry”がidで指定されている場合はこうです。
-
jQuery(“#entry img”).lazyload({
これでサイドバーはLazy Loadが適応されないので、今まで表示されていなかった画像も表示できて、コンテンツ部分のみLazy Loadが効いてるはずです。
そもそもなぜ下までスクロールしないとサイド部分の画像が表示されなかったというと、ソースコードの記述順に画像が表示されるようになってるからです。
コンテンツ ⇒ サイドメニューの順にソースが記述されているので、コンテンツ部分をスクロールし終わってからサイドの画像が表示になります。
この仕様だと上記で紹介した、サイド部分を無効化して対応するしかありません。
さらに詳しい説明はこちらに書いたのでよかったらご覧下さい。
lazy loadプラグインで、画面下までスクロールしないとサイドメニューが表示されない場合の対処方法
