Javascriptスライドショーで最初のスライドだけ表示が遅い

Javascript初心者です。スライドショーを作ろうとしているのですが、ウェブページをロードした際にはじめの画像が表示されるまでに少し時間がかかってしまいます。画像をはじめからウェブサイト上に表示させるにはどうすればよいのでしょうか。

こちらが自分のコードです。
https://jsfiddle.net/t0hfxkq3/3/

HTML
1<img id="slider" width="200" height="200" alt="slide">

CSS
1#slider {
2    opacity: 1;
3    transition: opacity 1s; 
4}
5
6#slider.fadeOut {
7    opacity: 0;
8}

javascript
1var imgArray = [
2    'https://images.unsplash.com/photo-1521673461164-de300ebcfb17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
3    'https://images.unsplash.com/photo-1497993950456-cdb57afd1cf1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
4    'https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'],
5    curIndex = 0;
6    imgDuration = 3000;
7
8function slideShow() {
9    document.getElementById('slider').className += "fadeOut";
10    setTimeout(function() {
11        document.getElementById('slider').src = imgArray[curIndex];
12        document.getElementById('slider').className = "";
13    },1000);
14    curIndex++;
15    if (curIndex == imgArray.length) { curIndex = 0; }
16    setTimeout(slideShow, imgDuration);
17}
18slideShow();

スライドショーを作るのにはこのウェブページの二つ目のコードを参考にしました。
https://stackoverflow.com/questions/25347946/add-fade-effect-in-slideshow-javascript

kei344

2020/06/13 07:55

（質問文は編集できます）コードは外部サービスだけでなく、質問文にコードブロックでお書きください。（そのほうが回答が付きやすいと思います）

退会済みユーザー

2020/06/13 08:12

修正の依頼ありがとうございます。助かりました。

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

回答1件

rel="preload"で先読みしてみるとかどうでしょう。

【rel="preload" によるコンテンツの先読み - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

【サイト高速化に必須の link rel=preload とは？（使い方とサンプルHTML・CSS） | 株式会社WEB企画】
https://webkikaku.co.jp/homepage/blog/hpseisaku/htmlcss/preload/

【rel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス技術戦略部ブログ]】
https://techblog.raccoon.ne.jp/archives/1575956867.html

投稿2020/06/13 08:33

kei344

総合スコア69625

退会済みユーザー

2020/06/13 09:34

回答ありがとうございます。```<link rel="preload" href="resources/img/photo-1591703291603-2150887a3db5.jpg" as="script">```とやってみましたが、chromeデベロッパーツールで The resource file:///C: was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.というエラーが起きてしまいました。```as="image"```も試してみましたが、同じ内容のエラーが起きてしまいました。このエラーについても調べてみましたが、まだ解決方法がわからないので、もう少し調べてみます。ありがとうございました。