HTML / 備忘録

HPサイトのコーディングで、背景画像数枚を切り替えるような動きにしたいという要望があり、こちらをHTMLとCSSで構築していた時の話です。

メインビジュアルの背景画像を数秒間隔で切り替えるあの演出は今ではよく見かけます。

CSSが便利になり、Jsを頼らなくてもできるようになりました。

例えば、以下のようなヘッダーがあるとし、その背景画像を数枚用意し、数秒ごとに切り替える演出をするとします。

 

<header id="header">
  <h1>サイトタイトル</h1>
  <p>サイトのリード文</p>
</header>

 

@keyframes changeBg {
  0%, 22% {
    background-image: url(Bg_01.png);
  }
  25%, 47% {
    background-image: url(Bg_02.png);
  }
  50%, 72% {
    background-image: url(Bg_03.png);
  }
  75%, 97% {
    background-image: url(Bg_04.png);
  }
  100% {
    background-image: url(Bg_01.png);
  }
}

#header {
  background: no-repeat scroll center center transparent;
  animation: changeBg 16s infinite;
}

 

これを表示してみると、1枚目の背景画像が表示し、次の画像が表示される間、一瞬だけ真っ白になり2枚目が表示されるという挙動が見られました。

3、4枚目も同じで、ループするため1枚目に戻るときにはその挙動はなくなり、ふわっと切り替わる演出となりました。

これはどういうことだ？と調べると、2枚目の画像が先にブラウザに読み込まれてCSSで表示される動きをしているためだとか。

つまり、ブラウザに予め読ませる必要があるようです。

先に読ませる場合はどうしたらいいのか調べると、headタグ内で予め読み込ませたいものを指定するんだそう。

 

<link rel="preload" href="Bg_01.png" as="image">

 

linkタグでrel要素でpreload、href要素で画像のパス、as要素で種類（image）を指定すると、headタグを読み込むタイミングで画像を予め読み込んでくれるということです。

今ではimgタグに loading=”lazy” decoding=”async”を入力し、ウェブサイトの表示スピードを速くするための処置をしたりします。

すべて読み込んでから表示というのは今はそこまでクオリティを求めてない傾向があり、ユーザー側もプログレスがぐるぐる回ってなかなか表示しないというよりかは、テキストコンテンツが先に表示してほしい情報が見れるのであれば特に画像がなくとも良いかなという考えが強いのかもしれません。

しかし、アニメーションの表示がスムーズでないのもちょっとそれは…ってなりますよねｗ

そういうことで、画像でこれだけはしっかりと表示させたいというときには予め読み込ませる対応はした方が良さそうですね。