リソースの先読み(プリロード)の指定ができる、link要素のrel=”preload”を試してみます。
設定方法
まずは設定前のサンプルです。
以下のようなHTMLを用意します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デモページ</title> <link rel="stylesheet" href="sample.css"> </head> <body> <div class="mv"></div> <img src="img.jpg"> </body> </html>
.mvに背景画像を設定します。
.mv {
width: 100%;
height: 800px;
background: url(mv.jpg) center center no-repeat;
background-size: cover;
}
設定前のデモページ
このデモをchromeのDevToolsのNetworkタブで確認すると、CSS内で背景画像として指定しているmv.jpgは、CSSファイルの読み込み後に読み込みが開始されていることが確認できます。
次にpreloadでmv.jpgを設定してみます。
href属性にリソースのパス、as属性にリソースの種類を指定します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デモページ</title> <link rel="preload" href="mv.jpg" as="image"> <link rel="stylesheet" href="sample.css"> </head> <body> <div class="mv"></div> <img src="img.jpg"> </body> </html>
先ほどと同様にNetworkタブで確認すると、mv.jpgの読み込みタイミングが変更されたのを確認できました。
設定後のデモページ
as属性で使用できる値の一例は以下の通りです。
| audio | 音声ファイル。 |
|---|---|
| document | HTML文書。 |
| font | フォントファイル。crossorigin属性を合わせて設定する必要がある。 |
| image | 画像ファイル。 |
| script | JavaScriptファイル。 |
| style | CSSファイル。 |
| video | 動画ファイル。 |
link要素にmedia属性を使って、メディアクエリの指定をすることもできます。
先ほどのサンプルで、.mvの背景画像をSPとPCで出し分けるようにしてみます。
まずはpreload設定前です。
HTMLは最初のサンプルと同じなので省略します。
.mv {
width: 100%;
height: 800px;
background: url(mv_sp.jpg) center center no-repeat;
background-size: cover;
}
@media screen and (min-width: 768px), print {
.mv {
background-image: url(mv_pc.jpg);
}
}
画面幅768px以上で画像を出し分けました。
media属性設定前のデモページ
次にpreloadの設定ですが、767px以下の時と768px以上の時の2つの設定を追加します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デモページ</title> <link rel="preload" href="mv_sp.jpg" as="image" media="(max-width: 767px)"> <link rel="preload" href="mv_pc.jpg" as="image" media="(min-width: 768px)"> <link rel="stylesheet" href="sample.css"> </head> <body> <div class="mv"></div> <img src="img.jpg"> </body> </html>
これで画面幅に応じて先読みする画像を変更することができました。
media属性設定後のデモページ
コメントが承認されるまで時間がかかります。