imgが表示されないときにロードされるかどうかをテストします.

2556 ワード
img
ずっと分からないで、隠れた要素の背景図、ページがロードする時、自動的にロードしますか?
imgが非表示の場合、画像はロードされますか?
テストコードは次のとおりです.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>img load</title>
	<style>
	.divImg {background:url(cssImg1.jpg);}
	.divImg {background:url(cssImg2.jpg);}
	.divNullImg {background:url(cssNullImg.jpg);}
	.divImgNone {display:none;}
	.divImgNone {background:url(cssNoneImg1.jpg);}
	.divImgNone div {background:url(cssNoneImg2.jpg);}
	#divNone {background:url(cssNoneImg3.jpg);}
	.divHoverImg:hover {background:url(cssHoverImg1.jpg);}
	</style>
	</head>	
<body>

<img src="img.jpg" />
<img src="cssImg2.jpg" />
<img src="ImgNone.jpg" style="display:none;" />

<div id="divNone" style="display:none; background:url(divNoneBack1.jpg);">
<img src="divNoneImg1.jpg" />
<div style="background:url(divNoneBack2.jpg);"></div>
</div>
<input type="button" value=" " onclick="document.getElementById('divNone').style.display = 'block';" />

<div class="divImg">
img
</div>

<div class="divImgNone">
<img src="divNoneImg2.jpg" />
img none
<div></div>
<div style="background:url(divNoneBack3.jpg);"></div>
</div>

<div class="divHoverImg">
test Hover
</div>

<script>
var img = new Image();
img.src = 'jsImg.jpg';
document.getElementById('divNone').style.backgroundImage = 'url(jsNoneImg.jpg)';
</script>

</body>
</html>

chrome 33とIE 7のFiddlerモニタの使用をテストしました
テスト結果は次のとおりです.
結果は複雑で、IEとchromeの下のhoverスタイルの背景図は、マウスが浮遊しているときだけロードされます.chromeの下で隠した背景はロードしないで、IEの下で隠した背景はロードします.
結論chrome:
  • で非表示になっている要素とその背景図はロードされません(スタイル非表示要素の現在の背景はロードされます).
  • hoverのバックグラウンドマップはロードされず、hoverの場合にのみロードされます.
  • 非表示のimgまたはimgは、非表示の要素にもロードされます.
  • に一致するスタイルがなく、含まれる背景は表示されません.
  • 非表示の要素にJSを使用して背景図を設定すると、背景図がロードされます.

    • 結論IE:
  • hoverのバックグラウンドマップはロードされず、hoverの場合にのみロードされます.
  • に一致するスタイルがなく、含まれる背景は表示されません. 
    • cococos 2 dx ScrollViewテスト2カスタムItemとboundingBox
    JAva反射-Constructor