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