ブログが重い! ④ Lazy Loadをサイドバーにも適用させる方法

lazy-load

 画像をスクロールに応じて読み込ませることで、ファースト・ビューの高速化をはかり、且つ画像がふわっとフェードインする効果がなんとも気持ちいいjQueryのプラグイン
Lazy Load  」。

有名なプラグインらしいので詳細は省きますが、良いことばかりでもなく
▲ 動かない
▲ サイドバーの画像が一番下までスクロールしないと表示されない

といった不具合報告が多く、私が導入しても同じ症状に悩まされました。

スポンサーリンク

Lazy Load が動かない!

現在のLazy Loadのバージョンは「1.9.4」ですが、残念ながらどうやっても動作しないため、旧バージョン(1.5.0)にしてみたら動きました。

もしかすると私の場合は、画像にclass=”lazy”と付けないで全てのimgに適用させるべく$(“img.lazy”)ではなく$(“img”)とだけ記載してHTML側に何も書いてないからなのかもしれません。
(旧バージョンでは書かなくても動くのですが・・)

他にも対策としてとられてることは、
</head>前を</body>前に移動する。
など色々と上下してみることで動くようになった人も多いようですが、置き場所によってはLazy Loadが動作しても別の物が動かなくなることもあるため、設置前のバックアップと、
動作後はTOPページと記事ページ、スマホ等で確認をとってから保存することをお薦めします。

サイドバーの画像が下までスクロールしないと表示されない解決法

この問題でLazy Loadの導入をあきらめる人が多いようでした。
サイドバーに適用しない方法や除外する方法は見つかりましたが、
サイドバーにも共存させる解決法は見つからないので、試行錯誤を繰り返すうちに上手くいった解決方法を紹介します。

サイドバーに適用しない方法

テンプレートによって記述が異なりますが、記事ページだけに適用したい場合は、class名やIDを先に指定します。

$(“.entry img”).lazyloadや、 $(“.post-body img”).lazyloadなど

サイドバーを除外する方法

下までスクロールしないと見えないなら、初めからサイドバーだけ除外してしまおう!という方法です。
(これもID・class名は環境に合わせて下さい)
.not()で除外してあげます。
$(“img”).not(“#sidebar-wrapper img”)

サイドバーもスクロールに応じて表示させるには?

普通に記載すると

↑これにサイドバー用も書き足します。

これでサイドバーが表示されない不具合が解消されたと思います。
これでも解決しない場合はサイドバーのID名の階層を変えてみると上手くいくかもしれません。


Lazy Loadを導入してみて、
高速化したか?と聞かれると

「したような、してないような。別の部分が遅くなったような・・・。」

一応「placeholder」で1×1pxの画像を指定してますが、旧バージョンでは見えてない部分も先に読み込んでるので高速化にならない。といった意見もあるようなので微妙です。

初めてLazy Loadを導入される方は、多くの方が解説してるサイトがすぐに見つかるので、その中でも1年以内のものを検索するようにしたら新しいバージョンの解説が見つかると思います。

私は新バージョンが上手く動作しないため断念~(T_T)/

最後までご覧いただき ありがとうございました。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る