hidden-xsなどでレンダリングしない領域内のコンテンツをブラウザはロードしますか？

Question

スマートフォンとPC向けに画像や動画などのコンテンツを出し分けしています。
その際に、bootstrapを利用して、hidden-xsで重たいコンテンツを非表示にしています。

この際、SafariやAndroid WebViewはこのhidden-xs内のコンテンツをロード(ダウンロード・レンダリング準備)をしているのでしょうか？それとも、隠されている領域は表示される段階になるまでロードされないのでしょうか？

逆に、PCではvisible-xs-*でモバイル用のコンテンツを非表示にしています。幅次第なので、幅を小さくしたり、大きくしたりすると両方のコンテンツがロード・レンダリングされますが、幅が大きいままの状態で一度も幅を狭くしてない場合、visible-xs-*のコンテンツをロード(ダウンロード・レンダリング準備)をしているのでしょうか？

Answer 1

基本的にはhiddenの部分も含めて全てロードしているはずです。
なので、cssによって表示・非表示を変えたところで、それによってロード時間が増減することはないと思います。

Answer 2

ブラウザの仕組み: 最新ウェブブラウザの内部構造 レンダーツリーの構築にHTML5世代のブラウザの内部構造がいろいろと書かれているので、目を通されると良いと思います。

読んでみてdisplay: noneとしている箇所のレンダリングは行われなさそうな事は理解したんですが、画像のダウンロード等は行われているのか自信がありません。該当箇所近くが表示されるまで画像のダウンロードを遅延させてたような気もするので、display: noneな要素は画像ダウンロードされていないような気もします。

ブラウザにより、実装が異なる部分かもしれないので、開発者コンソールで見ていると面白いかもしれません。

Answer 3

hidden-xsは、結局なかで

display: none !important;
visibility: hidden !important;

を指定しているようなので、画像はロードされていると思います。

画像を読み込みたくないのであれば、以下のようにすればいいと思います。
@media (min-width: 479px) {
background-image: url('xxxx.jpg')
}