Можно ли загрузить другое изображение на основе медиа-запроса, чтобы сократить время загрузки?

Question

Например, скажем, у меня есть div и для фонового изображения установлено значение «X», которое отображается только для размеров рабочего стола. Когда запрос меняется на мобильный, я бы установил фоновое изображение на «Y».

Сделает ли это так, что на мобильном телефоне будет загружаться только «Y», а не «X»? «X» - большое изображение, а «Y» - маленькое, я пытаюсь уменьшить время загрузки. Также, если на рабочем столе загружаются «X» и «Y» или просто «X», а не «Y»?

css performance media-queries

1

Robbie Fikes 10 Янв 2015 в 01:30

1

Да, именно для этого и нужны медиа-запросы.

–

Justin Breiland

10 Янв 2015 в 01:33

Answer 1

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

К сожалению, вы не можете установить источник тега изображения (только с javascript).

Примере:

.container {
  background-image: url(big.jpg);
}

@media all and (max-width: 699px) {
  .container {
    background-image: url(small.jpg); 
  }
}

3

Pepijn 10 Янв 2015 в 01:33

Answer 2

Вы можете использовать CSS Media Type и размер экрана для отображения разных фонов. http://css-tricks.com/snippets/css/ медиа-запросы-для-стандартных-устройств /

1

Nick 10 Янв 2015 в 01:34

Answer 3

Да, это то, что делают медиа-запросы

Вы можете создать два CSS для каждого размера экрана, например:

@import url("test.css") screen and (min-width: 960px);
@import url("testmobile.css") screen and (max-width:  959px);

Или вы можете добавить медиа-запрос в каждое правило CSS.

@media all and (max-width: 699px) and (min-width: 520px) {
}

Пожалуйста, проверьте эту ссылку, она вам поможет

1

Mouhamad Kawas 10 Янв 2015 в 01:39

Можно ли загрузить другое изображение на основе медиа-запроса, чтобы сократить время загрузки?

3 ответа

Похожие вопросы

Новые вопросы

css