Как предотвратить загрузку изображения на мобильный? - PullRequest
Новая
       26

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

0 голосов
/ 21 мая 2018

Предполагая эту разметку: 

<picture>
    <source media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" />
    <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" />
    <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" />
</picture>

Можно ли предотвратить загрузку изображения «до 767» на небольшие устройства без использования JavaScript?В то время как следующий CSS скроет изображение и, похоже, решит проблему визуально: 

@media (max-width: 767px) {
  .responsive-image { display: none; }
}

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

Fiddle: https://jsfiddle.net/n68ousqu/

...