CSSの背景画像の読み込みの動作

Question

display:none（画面に表示されていない）に設定されている要素にCSSスタイルの宣言があり、背景画像が設定されているとします。

この要素は、マウスクリックなどのイベントで表示されます。要素が表示される前であっても、ブラウザはこれらの画像をロードしますか？この負荷の動作はブラウザ間で一貫していますか？

Answer 1

前にテストしたブラウザはありません。

イメージを読み込みたい場合は、動作するbackground-position: -1000px -1000pxを試してみてください。画像は表示されませんが、プリロードされます。しかし、要素は通常の流れにある、すなわち隠されていない。

Answer 2

自動的には読み込まれませんが、画像をプリロードするにはJavaScriptのトリックを使用できます。そしてイメージをロードするために、その背景にimagetoload.pngを割り当てる：

pic = new Image(); 
pic.src="http://url/imagetoload.png"; 

は、より良い解決策としては、（-1000px左など）負の測位値のDIVを作成することができます。

Answer 3

このトピックには多くの良い情報はありませんので、私はa testpage by Steve Soudersを使ってwebpagetest.orgでいくつかのテストを行いました。

テストされたすべてのブラウザのうち、のみFirefoxはdisplay：noneで背景画像を読み込みません。あなたはsee the test results on my blog hereです。