jQueryでローディングアニメーションを作っています。1度目のアニメーションは完了するのですが、リロードするとアニメーションが完了しません。キャッシュの問題だと思うのですが、解決方法がわかりません。

jQueryでローディングアニメーションを作っています。
サイトが開かれると、画面いっぱいにオーバーレイ画面があらわれ、その中央で画像が上部に移動します。
そのあとオーバーレイ画面や中央の画像は消え、本来のサイトが表示されるというものです。

HTML、CSS、jQueryは次の通りです。

HTML
1<div id="anime">
2        <div id="logo">
3            <img src="img/logo-w.svg" alt="" class="fadeUp">
4        </div>
5    </div>

CSS
1#anime {
2	position: fixed;
3	width: 100%;
4	height: 100%;
5	z-index: 999;
6	background:#4b6cb7;
7	text-align:center;
8	color:#fff;
9}
10
11#logo {
12	position: absolute;
13	top: 50%;
14	left: 50%;
15	transform: translate(-50%, -50%);
16}
17
18#logo img {
19	width:260px;
20}
21
22.fadeUp{
23    animation-name: fadeUpAnime;
24    animation-duration:0.5s;
25    animation-fill-mode:forwards;
26    opacity: 0;
27}
28
29@keyframes fadeUpAnime{
30  0% {
31    opacity: 0;
32	transform: translateY(100px);
33  }
34
35  100% {
36    opacity: 1;
37	transform: translateY(0);
38  }
39}
40

jQuery
1$(function () {
2    $(window).on('load', function () {
3        $("#anime").delay(1500).fadeOut();
4        $("#splash_logo").delay(1200).fadeOut();
5    });  
6})

こうやって作ったサイトですが、最初にローディングアニメーションを動かしたときはきちんと動きます。
しかしサイトをリロードしてもう一度ローディングアニメーションを見ると、アニメは完了してもオーバーレイ画面や中央の画像は消えてくれません。

どうやらブラウザにキャッシュされるので消えないようです。
ためしにブラウザのキャッシュをクリアすると、ふたたびきちんとローディングアニメーションは動き、そして消えてくれます。

ネットで検索したところ、「画像末尾にパラメータを付ければ、最初の画像と次の画像は違う画像と認識するためアニメーションは終了する」といった記事をいくつか見たので、ネット記事を真似て次のように時間のパラメータをつけてみました。

jQuery
1$(function () {
2    $(window).on('load', function () {
3
4        $("#anime").delay(1500).fadeOut();
5
6        var timestamp = new Date().getTime();
7        $('#logo img').attr('src', 'img/logo.svg' + '?' + timestamp).delay(1200).fadeOut();
8
9    });
10})

しかしこの方法を試してみたところ、たしかにリロードするたびに画像の末尾にそれぞれ異なるパラメータは付くのですが、それでもリロードした場合はローディングアニメーションは消えてくれません。

そこで今回のお聞きしたいのは、どうやってローディングアニメーションを消したらいいのか？　ということです。
わたしの書いたコードに何か不備があるのかもしれませんし、あるいはキャッシュ以外に何か解決方法があるのならその方法でも構いません。

よろしくお願いします。

Lhankor_Mhy

2021/06/30 01:27

$(function () { $(window).on('load', function () { としている意図はどういうものですか？

cheshire-cat

2021/06/30 02:20

Lhankor_Mhyさまお返事ありがとうございます。今回のサイトでは、$(function () {と$(window).on('load', function () {を使っている意図ですが、実は特に深く考えて使ったわけではないのです。わたしはjQueryのサイトを作るときに、最初に$(function () {});を記述し、その中に複数のjQueryのコードを記述しています。たとえば今回のサイトだと、質問したのはローディングアニメーションの部分ですが、スライダーやタブの切り替えなどのjQueryコードも書いています。つまり今回は$(function () {});のなかに、たまたまローディングアニメーションのjQuery部品をはめ込んだというのが実際のところです。ローディングアニメーションのjQuery部品をはめ込んだのは今回が初めてだったので、はめ込み方が正しいのかどうかがわかりませんでした。けれどLhankor_Mhyさまの質問をきっかけに、$(function () {と$(window).on('load', function () {は両方とも必要なのかな？　と思い立ち、一方を消してサイトを動かしてみたところ、リロードしてもきちんとローディングアニメーションは終了してくれました。ありがとうございます。 Lhankor_Mhyさまの質問をベストアンサーに選びたいので、「回答する」欄に何かお返事を頂けないでしょうか？よろしくお願いします。

Lhankor_Mhy

2021/06/30 03:08

ご解決されて何よりです。これが原因だったのですね。お手数ですが、自己解決の処理をしていただけますと助かります。

cheshire-cat

2021/06/30 03:20

わかりました。ありがとうございました。