Загружены ли неиспользуемые изображения CSS?

Неиспользуемые изображения CSS загружаются браузером или игнорируются?

Eg. в правилах CSS, которые не соответствуют никаким элементам.

.nothingHasThisClass{background:url(hugefile.png);}

Или это зависит от браузера?

Ответ 1

Это зависит от браузера, так как он решил реализовать спецификацию, однако в кратком тесте здесь:

Chrome: Не
FireFox: Не
Safari: Не
IE8: Не
IE7: Не
IE6: Неизвестно (может кто-нибудь проверить и прокомментировать?)

Ответ 2

Нет, они не загружаются, по крайней мере, в 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 заполняется агентом пользователя браузера, тогда изображение загружается. Это было не в любом из моих тестов.

Ответ 3

Быстрый тест доказал это.

<!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>

Загружено 2-е изображение, tumblr_kxytwr7YzH1qajh4xo1_500.png, но не другое. Это было доказано в Chrome (средства разработчика) и Firefox (Firebug).

Ответ 4

Firefox и Chrome (Ubuntu 9.10) не загружают изображения для классов/идентификаторов, которые не применяются в DOM.

Возможно, это зависит как от платформы, так и от браузера.

Ответ 5

Почти все браузеры выполняют ленивую загрузку. Если изображение не требуется, оно не загружается. Используйте firebug (дополнение в Firefox/Chrome), чтобы увидеть время загрузки ресурсов.

Ответ 6

Иногда это зависит только от того, что означает "неиспользуемый". Различные браузеры определяют его по-разному. Например, в 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-совместимость, и always.png и otherbg.png загружаются в Chrome. Если у пользователя нет JS, то в Chrome загружается только nojsonly.png.

Я использую эту методику для измерения уровней трафика от пользователей, не поддерживающих JS, так как Google Analytics не позволяет нам здесь. Я предпочитаю использовать фоновый CSS-образ, а не обычный тег <img...>, потому что я работаю по теории (непроверенной), что боты с меньшей вероятностью захватывают изображение CSS, чем изображение <img...>, оставляя более точные подсчеты для человек посетители.

Ответ 7

Интересно, однако, 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>