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

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

Изображение имеет display:noneстиль, но его размер может быть прочитан сценарием. Chrome v68.0 не загружает изображения, если родитель скрыт.

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

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

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

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

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

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

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

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

Выдержка из поста в блоге:

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

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

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

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

В то время как я думал, что есть только решение проблемы JS ( ленивая загрузка , заполнение изображения и т. Д.) , Оказалось , что есть хорошее решение для чистого 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 фактическое изображение не будет отображаться (поэтому вам определенно понадобится резервная копия с полифилом).

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

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

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

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

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

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

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

Причудливый режим: изображения и отображение: нет

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

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

Будет загружено фоновое изображение элемента 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>

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

использование <img src="" srcset="">

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

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

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

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

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

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

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

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

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

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

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

мы говорим о том, что изображения не загружаются на мобильный, верно? так что, если вы только что сделали @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%;
    }
}

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