画像を早く読み込みたい

前提

サイトアクセス時に画像および文字をjsで一瞬表示しているのですが、
画像の読み込みに時間が多くかかっており、フェードアウトの時間を長くせざるを得ない状態になっています。
1度サイトに訪問するとキャッシュが残るため、再度アクセスした際に画像がすぐに表示され、3秒が長く感じてしまいます。

実現したいこと

画像をすぐに表示し、フェードアウト時間を短くできる方法はありますでしょうか。
もしくは画像読み込みが終わってからフェードアウトできるように設定する方法はありますでしょうか。

該当のソースコード

php
1       <div class="first-img">
2           <p><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/visual_bg.jpg" alt=""></p>
3           <span>
4             美容専門のコンシェルジュが、<br>
5             提供する「最高の美」
6          </span>
7       </div>

js
1  function firstimg() {
2    $('.first-img p').fadeIn(50);
3    $('.first-img span').fadeIn(500);
4  }
5  setTimeout(firstimg, 10);
6
7  setTimeout(function () {
8    $('.first-img').fadeOut(50);
9    $('#main').fadeIn(50);
10  }, 3000); //3秒後にロゴ含め真っ白背景をフェードアウト
11})(jQuery);

css
1.first-img {
2    background: #000;
3	position: fixed;
4	top: 0;
5	left: 0;
6	height: 100%;
7	width: 100%;
8	z-index: 9000;
9    background-size: cover;
10
11}
12.first-img p {
13    position: fixed;
14    z-index: 9998;
15    transform: translate(-50%, -50%);
16	display: none;
17    height: 100%;
18    width: 100%;
19    left: 50%;
20	top: 50%;
21}
22.first-img span {
23    font-family: "Noto Sans CJK JP Medium", sans-serif;
24    font-size: 3.8rem;
25    position: fixed;
26    letter-spacing: 0.1em;
27    color: #fff;
28    text-align: center;
29    z-index: 9999;
30    display: none;
31    justify-content: flex-end;
32    bottom: 200px;
33    width: 100%;
34}

試したこと

画像の容量を小さくしてみましたが、変わりませんでした。
また下記コードを試しましたが、firstimgを取得できず、logが出力されない状態です。

php
1       <div class="first-img" >
2           <p><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/visual_bg.jpg" alt="r" id="firstimg"></p>
3           <span>
4             美容専門のコンシェルジュが、<br>
5             提供する「最高の美」
6          </span>
7       </div>

js
1 function firstimg(){
2
3  $('.first-img p').fadeIn(500);
4      $('.first-img span').fadeIn(500);
5    };
6    setTimeout(firstimg, 10);
7    window.addEventListener('DOMContentLoaded', function(){
8        var img_elements = document.getElementById('firstimg');
9        for (var i = 0; i < img_elements.length; i++) {
10            img_elements[i].addEventListener('load', (e) => {
11                console.log(" load");
12            });
13            img_elements[i].src = img_elements[i].getAttribute("src");
14        }
15      });

補足情報

visual_bg.jpg 751 × 1335 140KB

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

回答2件

ベストアンサー

loadイベントを拾ってはいかがでしょうか。
画像の読み込みが完了したら処理を実行する | GRAYCODE JavaScript
imgタグの画像読み込みを監視する - Qiita

投稿2022/05/14 00:36

Lhankor_Mhy

総合スコア36089

scottie320

2022/05/14 05:32

なるほど、そういった方法があるのですね。試したところ、querySelectorAll("img");だと、#mainの画像の一つが読み込まれた段階でaddEventListenerが動いてしまうので、getElementByIdで要素を取得しようと思っているのですが、要素が取得できず、テストで入れているlogが出力されません。原因分かりますでしょうか。

Lhankor_Mhy

2022/05/14 05:54

getElementById() が null を返す、ということですよね？実際のコードを見ないと何とも言えませんが、ありそうな原因としては、・DOMが読み込まれる前にスクリプトを実行している・IDの記述を間違えている（#mainと書いてしまっている）・IDが重複しているなどでしょうか。

scottie320

2022/05/16 11:57

ありがとうございます。 forの繰り返しを消すことでコードが動きました。この度は回答ありがとうございます。

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

下記のように、コードを変更することで問題なく表示ができました。

js
1  function firstimg(){
2
3  $('.first-img p').fadeIn(500);
4      $('.first-img span').fadeIn(500);
5    };
6    setTimeout(firstimg, 100);
7    window.addEventListener('DOMContentLoaded', function(){
8        var img_elements = document.getElementById('firstimgs');
9        img_elements.addEventListener('load', (e) => {
10            console.log(" load");
11            $('.first-img').delay(750).fadeOut(1000);
12            $('#main').fadeIn(800);
13
14        });
15            img_elements.src = img_elements.getAttribute("src");
16
17      });