[JS]lazyloadとスクロールアニメーションAOS.jsを一緒に使ったら画像の表示位置がおかしくなった

ども、むったん（@6ttan）です。

先日とある案件で、スクロールアニメーションが入ってるサイトを移管することがありました。
移管先は強制的に画像の読み込み遅延を行うlazyloadがつくので、画像がいっぱいあるLPでも待ち時間なく表示できるという優れもの✨

移管作業も完了しサイトチェックをしてると、表示領域にコンテンツが入った瞬間シュッ！と文字やら画像がスライドしてくるんです。
でも、ふと…画像が表示領域に入っても表示されてないことに気付いたのが事の始まりでした。

問題の現象

まずは、AOS.jsにlazyloadをそのまま付けてしまった状況です。

See the Pen lozy load & AOS.js 未対応 by むったん (@6ttan) on CodePen.

下にスクロールすると表示領域に入った画像が拡大されながら上に向かって出てくる設定をしていますが…お分かりいただけたでしょうか？
環境によって異なってきますが、5枚ある画像のうち3枚目あたりから表示領域に入っても画像が表示されず、真ん中あたりで表示されたり、既にzoom-in-up済みでアニメーションが全くなく普通に画像が表示されたり…。

とにかくAOS.jsのアニメーションが上手く出来てないんですよね😭

スクロールを上下しながら「なんでやーー😭」と考えて、たどり着いた結論としては…

• lazyloadによって表示領域に入ったらAOS.jsが発火する
• 最初の方は画像の位置がそんなにズレていないから表示位置に問題はない
• 下になるほど、lazyloadによって画像が読み込まれていないからAOS.jsが発火タイミングを迷ってる
• 上下スクロールをすると画像があったり無かったりするからAOS.jsは激しく混乱

という持論にたどり着きました。

解決コード＆解説

…つまりは表示位置をリセットできたりすればいいんじゃない？
と、思いましてAOS.jsのgithubを見ていたらありました、解決コード。

See the Pen vYgpWvE by むったん (@6ttan) on CodePen.

いかがでしょうか？
スクロールを上下にしても画像の表示位置にズレがなくなりました✨

解決方法として、imgタグを読み込んだら要素全てのオフセットと位置の再計算をする！っていうのをJSの4行目以降に追加しました👏

それがAOS.refresh();ですね！

位置が決まっていればリフレッシュしなくても恐らく問題は起きませんが、lazyloadで都度読み込んでるからリフレッシュしてあげないといけなかったんですね。
あ…lazyloadが無くても、ウィンドウサイズを極端に動かすと要素の位置とか変わってくるから、意地悪な人対策のため（笑）にもリフレッシュ入れてあげた方が良いかもしれません🤔

ではでは👋