Answers:
这将取决于浏览器,因为这是他们决定实施规范的方式,但是在此处进行快速测试:
不,它们不会下载,至少不会在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中,应用于<noscript>
标签的样式被视为“未使用”,因此将不会下载任何图像。
Chrome 26(可能不确定所有),如果将CSS图像应用于<noscript>
元素,即使启用了JS。(我现在还不清楚为什么,也许这是一个错误?)。
它不下载应用到元素的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,则始终会在Chrome中下载always.png和otherbg.png。如果用户未启用JS,则仅在Chrome中下载nojsonly.png。
由于Google Analytics(分析)在这里无法为我们提供服务,因此我使用了这种技术来衡量未启用JS的用户的流量水平。我更喜欢使用背景CSS图像而不是普通<img...>
标签,因为我是根据(未经试验)的理论进行工作的,即与图像相比,机器人更不可能抓住CSS <img...>
图像,从而为人类游客留下了更准确的计数。
不过,有趣的是,在以下示例中,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>