画像の読み込みを遅らせるlazyloadがうまく動かない人へ

WEBサイト内に表示させる画像の読み込みを遅延させるlazyload。

Lazyload公式サイト

これまで画像がいっぱいのWPサイトではプラグインで導入していましたが、WPではない一般サイトに導入することに。

Google検索で「lazyload 使い方」などで検索すれば、導入の流れを開設したりチュートリアルのサイトはたくさん出てきます。

で、そのサイトを見ながら同じようにやろうとするのですが、なぜか作動しない・・・。

うーん(´･ω･｀)。

で、一旦、lazysizesに乗り換えて試してみたら、こちらは表示はうまく作動できたのですが、フェードインのアニメーションがうまく動かないので、再度lazyloadに挑戦。

改めて別の解説サイトを見て試したりしたのでしが、やはりなぜかうまく行かない・・・。

で、読み込んでいるjQueryのバージョンが間違っているのかと、2系と1系を試したのですが、やはりうなくいかない・・・ん！？

ここでようやく気付いたのですが。

本家のlazyloadは、バージョンが1と2と二つあります。

そして・・・。

lazyloadのバージョン1はjQuery利用仕様、バージョン2（2018年段階の最新版）は、非jQueryと全く違う仕様になっているのです！

lazyloadの作者の方は、脱jQueryに転向して、ネイティブのjsのみで作動する仕様に変更したのですねー。

ということで、このlazyloadバージョンの違いに注意して、設定していけばうまくいくはずです！

※多くの解説サイトは、自分が使用してるバージョンを当然の前提にして、この違いを曖昧にしているものが多い気がしました。

なお、大事なことですが、

lazyloadをダウンロードするgitHubでも、

・最新の非jQueryバージョンのlazyloadダウンロード

・jQueryを使用した旧バージョンのダウンロード

と両方が可能ですので、ダウンロードの際は確認してダウンロードしてください。

なお、私が設定した旧バージョンのLazyloadでは、

・jQuery読み込み
・jQuery.lazyload.js の読み込み
・jQuery実行コード
・<img class=”lazy” data-original=”” alt=”” />

でうまく作動しましたよ(*´ω｀)。

※なお、他のjQueryのプラグインとの干渉で動かない場合もあるようです。