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

Lazy Load

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

Lazyload公式サイト

https://appelsiini.net/projects/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ダウンロード

https://github.com/tuupola/jquery_lazyload

 

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

https://github.com/tuupola/jquery_lazyload/tree/1.x

 

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

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

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

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

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

 

 

 

 


Adv.

 

Leave a Reply

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

CAPTCHA