Загрузка одного и того же контента с использованием hidden-xs и visible-xs

Question

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

1. Hidden-xs для настольного просмотра, visible-xs для мобильного просмотра.
2. Это потому, что иногда стиль выглядит хорошо в настольном представлении, но не является удобным в мобильном представлении.
3. Например, изображение / div отлично отображается в режиме рабочего стола, когда речь заходит о мобильном представлении, оно может стать слишком большим.Мне не нужно фиксировать размер моего изображения, потому что изображение уже обрезано в том же размере.
4. Чтобы управлять этим, я использую hidden-xs и visible для создания двух div для настольного и мобильного просмотра.

Что я сделал:

1. Я попытался разделить свое изображение на два размера: мобильный и рабочий стол.Когда веб-сайт обнаружит, что он находится в мобильном представлении, он перезагрузится и отобразит изображение мобильного представления.Этот метод заставляет меня вырезать изображение при загрузке.
2. Hidden-xs и visible-xs

Вопрос:

1. Это любой возможный способ загрузить одно и то же изображение в мобильном представлении и на рабочем столепросмотреть без обрезки изображения в 2-х размерах и создания 2-х делений?
2. Создание 2-х делений потребует времени для загрузки, и это предварительная загрузка двухразрядного изображения, хотя и занимает меньше времени.

Спасибо.

Answer 1

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

<picture>
  <source media="(min-width: 487px)" srcset="http://via.placeholder.com/350x150">
  <source media="(max-width: 486px)" srcset="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/350x150" style="width:auto;">
</picture>

Это также можно сделать только с помощью srcset:

<img srcset="http://via.placeholder.com/350x150 776w,
             http://via.placeholder.com/150x150 486w">

Более подробную информацию о адаптивных изображениях можно получить по адресу MDN .

Answer 2

Это то, что я получаю.Но этот метод также требует двух изображений.Но нет необходимости предварительно загружать два изображения в два div.

1. Используйте php для определения размера браузера / устройства.
2. Если размер на рабочем столе, отобразите изображение рабочего стола.
3. Если размер в мобильном телефоне, отобразите изображение мобильного просмотра.