Câu trả lời:
Điều này sẽ phụ thuộc vào trình duyệt, vì đó là cách họ quyết định triển khai thông số kỹ thuật, tuy nhiên trong một thử nghiệm nhanh ở đây:
Không, chúng không được tải xuống, ít nhất là trong Firefox, IE8 và Chrome.
Một cách dễ dàng để kiểm tra điều này:
<!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>Nếu test.txtđược điền với tác nhân người dùng của trình duyệt, thì hình ảnh được tải xuống. Đây không phải là trường hợp trong bất kỳ thử nghiệm của tôi.
Một thử nghiệm nhanh đã chứng minh điều đó.
<!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>Hình ảnh thứ 2 tumblr_kxytwr7YzH1qajh4xo1_500.png, đã được tải xuống nhưng không phải hình ảnh khác. Điều này đã được chứng minh là đúng trong Chrome (Công cụ dành cho nhà phát triển) và Firefox (Fireorms).
Firefox và Chrome (Ubuntu 9.10) không tải xuống hình ảnh cho các lớp / id không được áp dụng trong DOM.
Điều này có thể phụ thuộc cả nền tảng và trình duyệt.
Đôi khi, nó phụ thuộc chính xác "không sử dụng" nghĩa là gì. Các trình duyệt khác nhau định nghĩa nó khác nhau. Ví dụ: trong Firefox, các kiểu được áp dụng cho <noscript>thẻ được coi là "không sử dụng" và do đó, mọi hình ảnh sẽ không được tải xuống.
Chrome 26 (có thể là tất cả trong số chúng, không chắc chắn), sẽ tải xuống hình ảnh CSS nếu chúng được áp dụng cho thành <noscript>phần, ngay cả khi bật JS. (Tôi không rõ ngay lập tức tại sao, có lẽ đây là một lỗi?).
Nó không tải hình ảnh CSS áp dụng cho các yếu tố trong các <noscript>yếu tố, mặc dù. (đây là hành vi dự kiến, tất nhiên).
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>Trong trường hợp này, nếu người dùng đã kích hoạt JS, cả hai luôn.png và otherbg.png đều được tải xuống trong Chrome. Nếu người dùng không kích hoạt JS, thì chỉ nojsonly.png được tải xuống trong Chrome.
Tôi sử dụng kỹ thuật này để đo mức lưu lượng truy cập từ những người dùng không hỗ trợ JS, vì Google Analytics không cho chúng tôi ở đây. Tôi thích sử dụng hình ảnh CSS nền hơn là <img...>thẻ thông thường , bởi vì tôi đang làm việc theo lý thuyết (chưa được kiểm tra) rằng các bot ít có khả năng lấy hình ảnh CSS hơn <img...>hình ảnh, để lại số lượng người truy cập chính xác hơn.
Tuy nhiên, điều thú vị là Chrome (ít nhất) sẽ tải xuống un used.png trong ví dụ sau:
<!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>