HTMLでの描画速度アップのために画像プリロードが必要なことがある。何種類か方法がある中で、どれがお手軽&汎用的かを検討してみた。

link rel=”preload”

HTMLヘッダに↓を埋め込む。

<link rel="preload" href="画像パス" as="image">

シンプル。好き。

でも、IE系がダメだったり、iOSのSafariでも11.3以降しかサポートしてなかったりと、モダンブラウザしか対応してないのが難点。

JavaScriptでのプリロード

↓みたいなやつをwindow.onload時に実行。

const image = new Image();
image.src = "画像パス";

現時点で生きてるブラウザなら、ほぼ確実に動くハズ。「わざわざJS使うまでもない気がする」っていう、心理的な面倒くささがデメリット。

CSSでのプリロード

CSS内で、どこぞの要素に読み込む。body:beforeがCSSだけで完結できるのでGOODか。

body:before {
    content: url("画像パス1")
    url("画像パス2");
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

Webで見つかる記事は、もっとシンプルに content: の指定と display: none; だけになってるヤツが多かった。でも、iOSのWKWebViewでは display: none; だとプリロードしてくれない事が判明。

↑は display: block; にしつつ、他の要素に影響与えないよう調整したバージョン。

筆者が採用した方法

ホントはlink rel=”preload”が使いたいけど、当面はブラウザを気にせず使えるCSSでのプリロードを採用することに決めたナリよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Name *
Email *
Website

*