画像表示系のjQueryアニメーションが動かない原因はLazy Load(画像の遅延読み込み)かも

jQuery・JS

2022.01.05

WordPress5.5から標準実装されたLazy Load(画像の遅延読み込み)についての備忘録です。

Lazy Loadはページ内の画像を一気に読み込むのではなく、画面の表示領域に入ったものから順に読み込むことで、ページの表示速度を上げるための機能です。

これまではプラグインやjQueryを導入して実装する必要がありましたが、WordPress5.5からは標準で実装されているようです。

標準で実装はとてもありがたいのですが、一部のプラグインやjQueryが動かなくなる原因にもなる(なりそうな)ので、備忘録として残しておこうと思います。

自分はこの原因を見つけるまでに結構な時間を要してしまいましたので、同じようなことで困っている方のためにもLazy Loadが原因で動かなかったアニメーションとこの機能を無効にする方法を以下でご紹介します。

動かなかったアニメーションは今のところひとつしかありませんが、出てきたら追記していこうと思います。

 

WordPress標準のLazy Loadが原因で動かなかったアニメーション

・https://tympanus.net/Development/Stapel/

 

なぜ動かないのか?

これは自分なりの考察ですので、参考程度に。

おそらく画像のhtmlをjQueryで書き換えたりする必要があるアニメーションに起こりやすい不具合ではないかと思います。

上で紹介したアニメーションも画像をグルーピングして重なったように表示するもので、その過程でhtmlの書き換えを行っています。

Lazy Loadもhtmlの書き換えを行っていますので、処理順序によって予期しない動作になってしまっているのではないかと思います。

スライダー系のjQueryにも言えることかもしれません。私がよく使うslick.jsは大丈夫みたいですが。

 

WordPress標準のLazy Loadを無効にする方法

原因を追求するにあたって、もしかするとこれが原因かも?と思ったときは、Lazy Loadを無効にして試してみてください。

functions.phpに以下のコードを追加するだけです。