jQueryの$(window).on('load')のコンフリクト

Question

前提・実現したいこと

現在、Webサイトを制作中でして、

①ローディングアニメーション
（サンプル：https://125naroom.com/demo/scroll_fixed_background_fade.html）

②スクロールエフェクト
（サンプル：https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-4/4-1-4.html）

を実装したいと考えています。

それぞれ、単体では動作するのですが、一緒に動かそうと思うとうまく動作しません。
おそらく、jQueryを使用していて、$(window).on('load~~ という部分がコンフリクトを起こしているのではないかと思うのですが、バッティングを回避する方法が分かりません。

発生している問題・エラーメッセージ

①、②を両方実装しようとすると、②が動作しなくなる。

該当のソースコード

//①ローディングアニメーション//

$(window).on('load',function(){
  $("#door-anime").delay(2000).fadeOut(1000);//ローディング画面を1.5秒（1500ms）待機してからフェードアウト
});


//②スクロールエフェクト//

$(function(){
  $('.one').each(function(i, elem){
      var contentsPOS = $(elem).offset().top;
      $(window).on('load scroll resize', function(){
          var winHeight = $(window).height();
          var scrollTop = $(window).scrollTop();
          var showClass = 'show';
          var timing = 200; // 100pxコンテンツが見えたら次のif文がtrue
          if (scrollTop >= contentsPOS - winHeight + timing){
            $(elem).addClass(showClass);
          } else {
            $(elem).removeClass(showClass);
          }
      });
  });
});

試したこと

jQuery.noConflict() での書き換え

補足情報（FW/ツールのバージョンなど）

Answer 1

スクロールエフェクトの方を関数化したらいいのではないかと思います。

let scroll = function(elem){
          var winHeight = $(window).height();
          var scrollTop = $(window).scrollTop();
          var showClass = 'show';
          var timing = 200; // 100pxコンテンツが見えたら次のif文がtrue
          if (scrollTop >= contentsPOS - winHeight + timing){
            $(elem).addClass(showClass);
          } else {
            $(elem).removeClass(showClass);
          }
}

$(window).on('load',function(i,elem){
  $("#door-anime").delay(2000).fadeOut(1000);//ローディング画面を1.5秒（1500ms）待機して
からフェードアウト
  scroll(elem);
});


//②スクロールエフェクト//

$(function(){
  $('.one').each(function(i, elem){
      $(window).on('scroll resize', function(){
          scroll(elem);
      });
  });
});

Comments

[ryo5ekine]

FKM様

ご丁寧にご回答いただきありがとうございます。

こちらのコードで試してみましたところ、①、②のモーションの部分は問題なく動くようになりました。ありがとうございます。

しかしながら、それまで
<div class="bg _01"></div>
<div class="bg _02"></div>
として背景画像に設定していたものが、表示されなくなってしまいました。
（ご回答コードの変更前は逆に背景画像がちゃんとでるもののモーションがおかしいという状態でした。）

もし可能であれば、下記コードを参考に背景画像を表示させる方法をご教授していただけますでしょうか。

---HTML---
<div class="container">
<div class="one">
<div class="bg _01"></div>
<section>
～～～
</section>
　　　</div>

<div class="one">
<div class="bg _02"></div>
<section>
～～～
</section>
　　　</div>

---CSS---
.one {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

#door-anime img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center center;
}

.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
opacity: 0;
transition: all 1.5s ease 0s;
z-index: -1;
}

.show .bg {
opacity: 1;
}

.bg._01 {
background-image: url(~~~);
background-size: contain;
background-repeat: repeat;
}
.bg._02 {
background-image: url(~~~);
background-size: contain;
background-repeat: repeat;
}

---Javascript---
ご回答いただいたもの

[FKM]

bodyタグの最後に持っていってください。headタグの中だとDOM生成前なので、画像が作られていないんだと思います。

[ryo5ekine]

再度コメントしていただきありまして、大変有難うございます。

jQueryとscript.jsともに（この順で）最初からbodyタグの最後にありました。

今回はうまくいきませんでしたが、今後の参考になるコメントありがとうございます。