お疲れ様です。
今日は、昨日から勉強していたローディング画面を作成終えましたので、まとめです。
１枚目が画像を読み込んでいる間に表示されるローディング画面で、2枚目が読み込まれた画像です。
cssとhtmlのコードです。
transition で1枚目の画像を1秒かけて変化するようにしています。試しにここを5sとすると、読み込み後の画像が表示されてからも残り続け、5秒かけてくるくる回る画像が消えていきました。
コメントアウト通り、classList.add で画像を読み込んだあとに、loadedクラスを追加するようにし、loadedクラスには #loading にある background-color を透明にするように opacity: 0; を書き、visibility というプロパティで、ウェブページ上にある #loading の画像を見えない（hidden）ようにしました。
これでローディングから、読み込まれた画像が表示されるようになりました。
今回はcssで fr という単位が出たり visibility というプロパティが出たりで、まだまだ調べることはたくさんありそうです。1つずつちゃんと調べて理解していきます。