ページの読み込みについて

Question

トップページのメインビジュアルの読み込みがおかしい。

トップページはフルスクリーンです。animationで４枚の画像が順番に浮き出るような
仕掛けに設定しています。そのうちの１枚目は背景画像です。
やっと完成したと思ったのですが、検索してそのページをクリックすると、１秒ほどですが
background: #00ABEB;だけが映し出され、その後に設定した画像のアニメーションが始まってしまいます。
画像の重さが原因ではないかと圧縮し直してみたり、アニメーションの時間を変えてみたり
してみたのですが、改善しないままになっています。
何か良案はありませんでしょうか。よろしくお願い致します。

<header>
  <h1 id="logo"><img></h1>
<div class="catchcopy"><p>キャッチコピー</p></div>
<aside  class="object-fit" id="mainimg">
 <img class="slide1"><img class="slide2"><img class="slide3"></aside></header>

header {
	height: 70px;
	background: #00ABEB;（他ページで必要なため）
	position: relative;
}


.catchcopy {
　z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);	
	
}

#mainimg {
	clear: both;
	position: fixed;	/*スクロールしても固定表示させる指定*/
	top: 0px;
	width: 100%;
	background: url("../images/img.jpg") no-repeat center center/cover;
	/*最初の１枚目（土台画像）*/

}

/*３枚画像の共通設定*/
.slide1,.slide2,.slide3 {
	animation-duration: 30s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;width: 100%;height: 100%;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 3s;
}
/*１枚目*/
.slide1 {
	animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
}

.slide3 {
	animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0; transform: scale(1);}
	10% {opacity: 1;}
	40% {transform: scale(1.1);}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0; transform: scale(1);}
	35% {opacity: 1;}
	65% {transform: scale(1.1);}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0; transform: scale(1);}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0; transform: scale(1.1);}
	100% {opacity: 0;}
}

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[退会済みユーザー]

すいません。調べてやってみます。。。時間がかかるかもしれませんがよろしくお願い致します。

[m.ts10806]

提示したリンクは「マークダウンのcodeの対応の仕方」が回答として書かれたものですので、ほぼそのまま参照できると思います。
質問編集画面にいければすぐではないかなと。（当該質問を提示してできなかった人は今のところいないので）

[kei344]

「animation」とありますが、それらしき記述がありません。書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を質問文に追記されたほうが回答を得やすいと思います。

[mari.rinn]

＞background: #00ABEB;（他ページで必要なため）

とありますが、このページ自体には必要ないなら、このページのheaderだけclassでもidでも良いのですが、それをつけてそれ用の、backgroundなしのCSSを書く　というのではダメなのですか？

[退会済みユーザー]

backgroundなしにしても、タイムラグがある事には変わらず、メインビジュアルが反映するまでの1，2秒
間、白い画面が映し出されることには変わりがないのです。
ただ、classやidでトップページに区別をつけるという発想がなかったので勉強になりました。
ありがとうございました！

Answer 1

何か良案はありませんでしょうか

Google検索 画像 プリロード に打開策があると思います。

Google検索 ブラウザの読み込み順 も調べてみると、納得できるのではないでしょうか。

---

追記）

CSS3に変わってくる中で「１つのセレクタに複数の背景画像（background-image）を指定できる」ようになりましたが、「この手法で背景画像をプリロード指定しておく。」という手法が定番でした（DOMContentLoaded発生以前から読み込みを開始するのが理由）

上に案内した検索先で HTML5またはcssまたはJavaScript（jQuery未使用）で画像の先読み（プリロード）を行う の１つめの方法になります。

ただし、この方法も限界があります。
高解像な画像の場合、ファイルサイズが大きくなってしまうため、background-imageを適用できず、background-color 単色が表示されてしまいます。
（ブラウザは、「取り敢えず、background-color を表示し、読み込みが完了した background-image を後から描画する」という特徴があるため）。

このため、**読み込みの早い（ファイルサイズの小さな）画像をbackground-size: cover;などを用いて、モザイク状態から徐々に鮮明な画像に切り替える「フェイク」**も検討しなければなりません。

※色々と試されたとは思いますが、質問欄は編集できますので、意図した効果を得られなかった内容（実験結果）を明らかにしてゆくことで、より効果的な回答を得られると思います。

Comments

[退会済みユーザー]

lazyも試してみましたが、なかなかうまくいきませんね。。。

[AkitoshiManabe]

lazyLoad (遅延読み込み)は、プリロードとは逆です。ページの下方にあって直ぐに表示させなくても良い画像をあとから読む。ローディング画像で誤魔化す。ユーザの体感速度を早く感じさせるフェイク技術です。
img 要素ではなく、background:url() で読むのがプリロードになります。