More than 5 years have passed since last update.

background imageをプリロードする方法

Posted at 2019-02-20

ページにCSS animationを設定した際に、backgroundのロードに時間がかかってしまい、アニメーションが不自然になってしまったので、背景画像を先にプリロードしたいと思います。

html

<head>
  <link rel="preload" as="image" href="background.png">
  <link rel="stylesheet" href="style.css">
</head>

これで、background.pngをプリロードできるので、cssのanimationが動く前に画像を読み込むことができます。