回答編集履歴
1
追記
answer
CHANGED
|
@@ -2,4 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Google検索 [画像 プリロード](https://www.google.co.jp/search?q=%E7%94%BB%E5%83%8F+%E3%83%97%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89) に打開策があると思います。
|
|
4
4
|
|
|
5
|
-
Google検索 [ブラウザの読み込み順](https://www.google.co.jp/search?q=ブラウザの読み込み順) も調べてみると、納得できるのではないでしょうか。
|
|
5
|
+
Google検索 [ブラウザの読み込み順](https://www.google.co.jp/search?q=ブラウザの読み込み順) も調べてみると、納得できるのではないでしょうか。
|
|
6
|
+
|
|
7
|
+
----
|
|
8
|
+
追記）
|
|
9
|
+
|
|
10
|
+
CSS3に変わってくる中で「１つのセレクタに複数の背景画像（background-image）を指定できる」ようになりましたが、「この手法で背景画像をプリロード指定しておく。」という手法が定番でした（DOMContentLoaded発生以前から読み込みを開始するのが理由）
|
|
11
|
+
|
|
12
|
+
上に案内した検索先で [HTML5またはcssまたはJavaScript（jQuery未使用）で画像の先読み（プリロード）を行う](https://pgmemo.tokyo/data/archives/740.html) の１つめの方法になります。
|
|
13
|
+
|
|
14
|
+
ただし、**この方法も限界があります**。
|
|
15
|
+
高解像な画像の場合、ファイルサイズが大きくなってしまうため、background-imageを適用できず、background-color 単色が表示されてしまいます。
|
|
16
|
+
（ブラウザは、「取り敢えず、background-color を表示し、読み込みが完了した background-image を後から描画する」という特徴があるため）。
|
|
17
|
+
|
|
18
|
+
このため、**読み込みの早い（ファイルサイズの小さな）画像を``background-size: cover;``などを用いて、モザイク状態から徐々に鮮明な画像に切り替える「フェイク」**も検討しなければなりません。
|
|
19
|
+
|
|
20
|
+
※色々と試されたとは思いますが、質問欄は編集できますので、意図した効果を得られなかった内容（実験結果）を明らかにしてゆくことで、より効果的な回答を得られると思います。
|