テストサーバーに上げるとJSが一部機能しない

ローカルでは、きちんとJS(scrollreveal)が動くのですがテストサーバーに上げると一部機能しません。
上の方にある要素は動くのですが、下の方にある要素はスクロールしてきても動かないor非表示です。なぜでしょうか？

ちなみに、表示されない要素は、ブラウザのサイズを変えると現れます。
また、リロードするとすべて要素が機能します。ページ遷移してきた時がうまく動きません。

全体的にサイズがとても、重いのですが、それが原因ということもありえるのでしょうか？

m.ts10806

2021/12/08 10:43

この内容だけで他者が言えることは全くないです。再現するコードを提示してください。環境も提示してください。コンソールにエラーがないか確認してください。

zzziiii

2021/12/10 08:52

コメントありがとうございます。ライブラリは最新です。 <script src="https://unpkg.com/scrollreveal"></script> 以下はオプションを追加した記述です。 ScrollReveal().reveal('.anime', { duration: 1600, origin: 'bottom', distance: '50px', reset: false }); ライブラリをダウンロードしてきて別途で読み込ませたりもしたのですが、下の方の要素はアニメーションがつきませんでした。ちなみに別途読み込ませたのは、v4.0.9です。他のJSを消し、コンソールのエラーを確認しましたが特にエラーは表示されませんでした。

行動規範の内容に同意します

回答2件

自己解決

ScrollRevealの前にloadイベントをつけたら解決しました。

まず、基本的な事がわかっていませんでした。(汗)
読み込む順番は、「HTML→JS→CSS,画像等」ということ。

恐らく、画像やCSSなどが圧縮しても量が多かったのでそれらが読み込み完了する前にJSが実行されていました。
なので、「HTML,CSS,画像等の読み込みが完了してからイベントを実行する」という風にしました。

参考にした記事は以下です。
<script> タグに async / defer を付けた場合のタイミング
 Window: load イベント

教えてくださった方ありがとうございました。

window.addEventListener('load', (event) => {
  console.log('ページが完全に読み込まれました');
  ScrollReveal().reveal('.anime', {
    duration: 1600,
    origin: 'bottom',
    distance: '50px',
    reset: false
  });
});