답변:
사양을 구현하기로 결정한 방식이므로 브라우저에 따라 다르지만 빠른 테스트는 다음과 같습니다.
아니요, 최소한 Firefox, IE8 및 Chrome에서는 다운로드되지 않습니다.
이것을 테스트하는 쉬운 방법 :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>
경우 test.txt브라우저의 사용자 에이전트로 채워집니다, 다음 이미지가 다운로드됩니다. 이것은 내 테스트 중 하나가 아닙니다.
빠른 테스트로 증명되었습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>
두 번째 이미지 인 tumblr_kxytwr7YzH1qajh4xo1_500.png을 (를) 다운로드했지만 다른 이미지 는 다운로드하지 않았습니다. 이는 Chrome (개발자 도구) 및 Firefox (Firebug)에서 입증되었습니다.
Firefox 및 Chrome (Ubuntu 9.10)은 DOM에 적용되지 않은 클래스 / ID의 이미지를 다운로드하지 않습니다.
그러나 이것은 플랫폼 과 브라우저에 따라 다를 수 있습니다 .
때때로, 그것은 "사용하지 않은"의 의미에 정확히 의존합니다. 다른 브라우저는 다르게 정의합니다. 예를 들어, Firefox에서 <noscript>태그에 적용된 스타일 은 "미사용"으로 간주되므로 이미지가 다운로드되지 않습니다.
Chrome 26 (모두 확실 하지는 않지만 ) 은 <noscript>JS가 활성화 된 경우에도 CSS 이미지가 요소에 적용된 경우 CSS 이미지를 다운로드 합니다. (아마도 이것이 버그일까요?)
그것은 하지 않습니다 CSS 이미지 요소에 적용 다운로드 내<noscript> 불구 요소입니다. (물론 이것은 예상되는 행동입니다).
CSS :
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }HTML :
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>이 경우 사용자가 JS를 사용하는 경우 always.png와 otherbg.png가 모두 Chrome에서 다운로드됩니다. 사용자가 JS를 사용하도록 설정 하지 않은 경우 Chrome에서는 nojsonly.png 만 다운로드됩니다.
Google 애널리틱스에서 오류가 발생하여이 기능을 사용하여 JS를 사용하지 않는 사용자의 트래픽 수준을 측정합니다. 나는 <img...>봇이 이미지보다 CSS 이미지를 잡을 가능성이 적고 <img...>인간 방문자에게 더 정확한 수를 남기는 (비평가) 이론 아래서 작업하기 때문에 일반 태그 보다는 배경 CSS 이미지를 사용하는 것을 선호 합니다.
흥미롭게도 다음 예제에서 Chrome (적어도)은 unused.png를 다운로드합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>