Не отображается ли "display: none", чтобы изображение не загружалось?

В каждом учебном пособии по разработке веб-сайта рекомендуется использовать свойство CSS display:none, чтобы скрыть контент от загрузки в мобильных браузерах, чтобы сайт загружался быстрее. Это правда? Не загружает ли display:none изображения или загружает контент в мобильном браузере? Есть ли способ предотвратить загрузку ненужного контента в мобильные браузеры?

Ответ 1

Загрузка этих изображений. Браузер из-за возможности динамической проверки элемента DOM script не оптимизирует элементы (или содержимое элементов).

Вы можете проверить его там: http://jsfiddle.net/dk3TA/

Изображение имеет стиль display:none, но его размер читается script. Вы также можете проверить его, посмотрев вкладку "сеть" инструментов разработчика вашего браузера.

Обратите внимание, что если браузер находится на маленьком компьютере с процессором, не имея необходимости отображать изображение (и компоновку страницы), он сделает всю операцию рендеринга более быстрой, но я сомневаюсь, что сегодня это действительно имеет смысл.

Если вы хотите предотвратить загрузку изображения, вы можете просто не добавлять элемент IMG в свой документ (или установить атрибут IMG src в "data:" или "about:blank").

EDIT:

Браузеры становятся умнее. Сегодня ваш браузер (в зависимости от версии) может пропустить загрузку изображения, если он может определить, что это не полезно.

Ответ 2

Если вы сделаете изображение фоном-изображением div в CSS, когда этот div установлен на "display: none", изображение не загружается. Когда CSS отключен, он все равно не будет загружаться, потому что, ну, CSS отключен.

Ответ 3

Ответ не так прост, как просто да или нет. Проверьте результаты теста, который я недавно сделал:

В Chrome: все 8 снимков экрана - * загруженные изображения (img 1)
В Firefox: загружается только 1 снимок экрана - *, загружаемый в настоящее время (img 2)

Итак, после копания я нашел this, в котором объясняется, как каждый браузер обрабатывает загрузку img-ресурсов на основе css-дисплея: none;

Отрывок из сообщения в блоге:

Chrome и Safari (WebKit):
WebKit загружает файл каждый раз, за исключением случаев, когда фон применяется через несоответствие медиа-запросы.

Firefox:
Firefox не будет загружать изображение с фоновым изображением, если стили скрыты, но они все равно будут загружать активы из img-тегов.

Opera: Как и Firefox, Opera не будет загружать ненужные фоновые изображения.

Internet Explorer: IE, как и WebKit, загрузит фоновые изображения, даже если они имеют отображение: none; Что-то странное появляется с IE6: Элементы с фоновым изображением и дисплеем: ни один набор встроенных не будет загружен... Но они будут если эти стили не применяются inline.

Ответ 4

HTML5 `<picture>` поможет вам определить правильный источник изображения в зависимости от ширины экрана

По-видимому, поведение браузеров не сильно изменилось за последние 5 лет, и многие все равно будут загружать скрытые изображения, даже если бы было display: none установлено display: none свойства.

Несмотря на то, что существует обходной путь для медиа-запросов, он может быть полезен только тогда, когда в CSS в качестве фона установлено изображение.

В то время как я думал, что есть только решение проблемы с помощью JS (lazy load, picturefill и т.д.), Оказалось, что есть хорошее решение для чистого HTML, которое выходит из коробки с HTML5.

И это <picture>.

Вот как MDN описывает это:

HTML-элемент <picture> - это контейнер, используемый для указания нескольких элементов <source> для конкретного <img> содержащегося в нем. Браузер выберет наиболее подходящий источник в соответствии с текущим макетом страницы (ограничения поля, в котором будет отображаться изображение) и устройством, на котором оно будет отображаться (например, обычное устройство или устройство hiDPI).

А вот как это использовать:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Логика позади

Браузер загрузит источник тега img, только если не применяется ни одно из правил мультимедиа. Когда элемент <picture> не поддерживается браузером, он снова вернется к отображению тега img.

Обычно вы помещаете наименьшее изображение в качестве источника <img> и, следовательно, не загружаете тяжелые изображения для больших экранов. И наоборот, если применяется правило мультимедиа, источник <img> не будет загружен, вместо этого он загрузит содержимое URL соответствующего <source>.

Единственный подводный камень в том, что если элемент не поддерживается браузером, он загрузит только маленькое изображение. С другой стороны, в 2017 году мы должны думать и кодировать в мобильном подходе.

И до того, как кто-то слишком взволнован, вот текущая поддержка браузера для <picture>:

Настольные браузеры

Мобильные браузеры

Подробнее о поддержке браузера вы можете узнать на странице "Могу ли я использовать".

Хорошо, что предложение html5please - использовать его с запасным вариантом. И я лично намерен принять их совет.

Подробнее о теге вы можете узнать в спецификации W3C. Там есть отказ от ответственности, который я считаю важным упомянуть:

Элемент picture несколько отличается от похожих video и audio элементов. Хотя все они содержат source элементы, атрибут src исходных элементов не имеет смысла, когда элемент вложен в элемент picture, а алгоритм выбора ресурса отличается. Кроме того, сам элемент picture ничего не отображает; он просто предоставляет контекст для содержащегося в нем элемента img который позволяет ему выбирать из нескольких URL-адресов.

Поэтому он говорит только о том, что он помогает вам повысить производительность при загрузке изображения, предоставляя ему некоторый контекст.

И вы все еще можете использовать некоторую магию CSS, чтобы скрыть изображение на небольших устройствах:

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

Таким образом, браузер не будет отображать фактическое изображение и будет загружать только 1x1 пиксельное изображение (которое может быть кэшировано, если вы используете его более одного раза). Имейте в виду, однако, что если <picture> не поддерживается браузером, даже на экранах descktop фактическое изображение не будет отображаться (поэтому вам обязательно понадобится резервная копия с полифилом).

Ответ 5

Да, он будет отображаться быстрее, немного, только потому, что ему не нужно отображать изображение и это один меньше элемента для сортировки на экране.

Если вы не хотите, чтобы он был загружен, оставьте DIV пустым, где вы можете загрузить html в него позже, содержащий тег <img>.

Попробуйте использовать firebug или wirehark, как я уже упоминал ранее, и вы увидите, что файлы будут переданы, даже если присутствует display:none.

Opera является единственным браузером, который не загружает изображение, если на дисплее установлено значение none. Теперь Opera переместилась в webkit и отобразит все изображения, даже если на их дисплее установлено значение none.

Вот страница тестирования, которая докажет это:

http://www.quirksmode.org/css/displayimg.html

Ответ 6

Режим Quirks: изображения и отображение: нет

Когда изображение имеет display: none или находится внутри элемента с display:none, браузер может отказаться от загрузки изображения до тех пор, пока displayустанавливается на другое значение.

Только Opera загружает изображение при переключении display в block. Все остальные браузеры сразу загружают.

Ответ 7

Фоновое изображение элемента div будет загружаться, если div установлен "display: none".

В любом случае, если тот же самый div имеет родительский элемент, а родительский элемент имеет значение "display: none", фоновое изображение дочернего элемента не будет загружаться. :)

Пример использования бутстрапа:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="col-xs-12 visible-lg">
	<div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div>
</div>
<div class="col-xs-12 visible-md">
	<div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div>
</div>
<div class="col-xs-12 visible-sm">
	<div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div>
</div>
<div class="col-xs-12 visible-xs">
	<div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div>
</div>

Ответ 8

Если да, есть ли способ не загружать ненужный контент в мобильные браузеры?

используйте <img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/#feat=srcset

Ответ 9

Если вы сделаете изображение фоном-изображением div в CSS, когда этот div установлен на "display: none" , изображение не загрузится.

Просто расширяя решение Brent.

Вы можете сделать следующее для чистого решения CSS, оно также делает поле img действительно таким же, как img-box в настраиваемом дизайне (для чего предназначен прозрачный png), что особенно полезно, если ваш дизайн использует отзывчивый - динамическое изменение размеров изображений.

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

Изображение загружается только тогда, когда медиа-запрос, связанный с видимым-lg-блоком, запускается и отображается: ни один не изменяется для отображения: блок. Прозрачный png используется, чтобы позволить браузеру устанавливать соответствующие соотношения высоты и ширины для вашего <img> блок (и, следовательно, фоновое изображение) в дизайне жидкости (высота: авто, ширина: 100%).

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

Итак, вы получите что-то вроде следующего, для 3 разных видовых экранов:

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

И только ваши изображения размера изображения в формате по умолчанию загружаются во время начальной загрузки, а затем, в зависимости от вашего видового экрана, изображения будут динамически загружаться.

И нет javascript!

Ответ 10

Чтобы предотвратить выборку ресурсов, используйте элемент <template> веб-компонентов.

Ответ 11

Нет. Изображение будет загружено как обычно и будет по-прежнему использовать пропускную способность пользователей, если вы рассматриваете возможность экономии пропускной способности пользователя мобильного телефона. Что вы можете сделать, это использовать медиа-запрос и фильтровать устройства, которые вы хотите, чтобы ваш образ был загружено. Ваше изображение должно быть установлено как фоновое изображение div и т.д., а НЕ тег, поскольку тег изображения загружает изображение независимо от размера экрана и заданного медиа-запроса.

Ответ 12

Другая возможность - использовать тег <noscript> и поместить изображение в тег <noscript>. Затем используйте javascript для удаления тега noscript, как вам нужно изображение. Таким образом, вы можете загружать изображения по требованию с использованием прогрессивного улучшения.

Используйте этот polyfill, который я написал, чтобы прочитать содержимое тегов <noscript> в IE8

https://github.com/jameswestgate/noscript-textcontent

Ответ 13

Используйте CSS-запрос @media, в основном мы просто выпускаем проект, в котором у нас было огромное изображение дерева на рабочем столе сбоку, но не отображалось в табличных/мобильных экранах. Поэтому предотвратите загрузку изображения довольно легко.

Вот небольшой фрагмент:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

Вы можете использовать один и тот же CSS для отображения и скрытия с отображением/видимостью/непрозрачностью, но изображение по-прежнему загружалось, это был самый безопасный код, с которым мы столкнулись.

Ответ 14

Привет, ребята, я боролся с той же проблемой, как не загружать изображение на мобильный.

Но я придумал хорошее решение. Сначала создайте img-тег, а затем загрузите пустой svg в атрибут src. Теперь вы можете установить свой URL-адрес в качестве встроенного стиля с контентом: url ( "ссылка на ваше изображение" );. Теперь оберните свой тег img в оболочку по вашему выбору.

<div class="test">
  <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>

  @media only screen and (max-width: 800px) {
      .test{
       display: none;
      }
    }

Установите оболочку для отображения ни одного из точек останова, где вы не хотите загружать изображение. Встроенный css тега img теперь игнорируется, поскольку стиль элемента, завернутого в оболочку с отображением, не будет проигнорирован, поэтому изображение не загружается, пока вы не достигнете точки останова, где оболочка имеет отображаемый блок.

Там вы идете, очень простой способ не загружать img на точку останова мобильной связи:)

Проверьте этот код для рабочего примера: http://codepen.io/fennefoss/pen/jmXjvo

Ответ 15

мы говорим о изображениях, которые не загружаются на мобильные устройства, не так ли? так что, если вы только что сделали @media (min-width: 400px) {background-image: thing.jpg}

не будет ли он тогда искать только изображение с определенной шириной экрана?

Ответ 16

** 2019 ответ **

В обычном режиме display:none не мешает загрузке изображения

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

Но если элемент предка имеет display:none то изображения-потомки не будут загружены


/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

Другие ситуации, которые мешают загрузке изображения:

1- Целевой элемент не существует

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2- Два равных класса загружают разные изображения

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

Вы можете посмотреть сами здесь: https://codepen.io/juanmamenendez15/pen/dLQPmX

Ответ 17

Трюк с использованием дисплея: ни один с изображениями не должен присваивать им идентификатор. Это было не так много кода, чтобы заставить его работать. Вот пример использования медиа-запросов и 3 таблиц стилей. Один для телефона, один для планшета и один для рабочего стола. У меня 3 изображения, изображение телефона, планшета и рабочего стола. На экране телефона отобразится только изображение телефона, на планшете будет отображаться только изображение на планшете, на рабочем столе отображается изображение рабочего стола. Вот пример кода, чтобы заставить его работать:

Исходный код:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

Телефонный CSS, для которого не нужен мультимедийный запрос. Его телефон img #, который заставляет его работать:

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

Планшет css:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

И рабочий стол css:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

Удачи и дайте мне знать, как это работает для вас.

Ответ 18

Если родительский div установлен на "display: none", изображение не будет загружено.

Так как почти все веб-сайты выполняют функцию ответа, скрывая родительские div, это, вероятно, тот ответ, который вы ищете.

Проверьте это - http://jsfiddle.net/v8eu39fL/1/

<div style="display:none;"><img src=http://dystroy.org/stripad/icon-v1.png id="test"></div>

alert("image width: " + $('#test').width());

Протестировано в FF, Chrome, IE.

Изменить: браузер загружает изображение в любом случае, теперь я вижу соединение на вкладке Сеть:/