Предотвращает ли" display:none " загрузку изображения?

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

17 ответов


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

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

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

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

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

EDIT:

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


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


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

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

Так что после копания дальше я нашел этой, что объясняет, как каждый браузер обрабатывает загрузку активов img На основе отображения css: нет;

выдержка из блога сообщение:

  • Chrome и Safari (WebKit):
    WebKit загружает файл каждый раз, за исключением случаев, когда фон применяется через несоответствие media-запрос.
  • Firefox:
    Firefox не будет загружать изображение, вызванное фоновым изображением, если стили скрыты, но они все равно будут загружать активы из тегов img.
  • Опера:
    как Firefox делает, Opera не будет загружать бесполезные фоновые изображения.
  • интернет Исследователь:
    IE, как WebKit будет загружать фоновые изображения, даже если они имеют дисплей: нет; Что-то странное появляется с IE6 : элементы с фоновым изображением и дисплеем: ни один набор встроенных не будет загружен... Но они будут если эти стили не применяются рядные.

Chrome- All 8 screenshot-* images loaded

Firefox- Only the 1 screenshot-* image loaded that is currently being displayed


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

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

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

пока я был думая, что есть только JS-решение проблемы (ленивый нагрузки, picturefill скота, etc.), оказалось, что есть хорошее чистое 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>:

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

Desktop browsers support

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

Mobile browsers support

подробнее о поддержке браузера вы можете найти на Я Могу использовать.

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

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

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

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

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

<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 пиксельное изображение, которое может быть кэшировано, если вы используете его более одного раза. Во всяком случае, это действительно не рекомендуется делать, потому что, если тег не поддерживается, даже настольные браузеры будут показывать только изображение 1x1px.


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

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

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

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

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

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


режим причуд: изображения и дисплей: нет

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

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


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

просто расширяю решение Брента.

вы можете сделать следующее Для чистого решения CSS, это также делает поле img фактически вести себя как поле img в адаптивной настройке дизайна (это то, для чего предназначен прозрачный 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">

изображение будет загружено только тогда, когда медиа-запрос, привязанный к visible-lg-block, запускается и отображается:none не изменяется на display:block. Прозрачный png используется, чтобы позволить браузеру установить соответствующие соотношения высота:ширина для вашего блока (и, следовательно, фоновое изображение) в жидком дизайне (высота: авто; ширина: 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!


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

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

пример использования bootstrap:

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

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


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

использовать <img srcset>

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


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

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

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


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

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

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


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

но я нашел хорошее решение. Сначала сделайте тег img, а затем загрузите пустой svg в атрибут src. Теперь вы можете установить URL-адрес изображения как встроенный стиль с содержимым: url ('link to your image');. Теперь оберните тег 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;
      }
    }

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

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

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


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


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

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


трюк с использованием дисплея: нет с изображениями, чтобы назначить им идентификатор. Это было не так много кода, необходимого для его работы. Вот пример использования медиа запросов и 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%;
    }
}

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


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

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

проверьте это -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.

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