CSS медиа-запросы загрузка изображений - PullRequest
0 голосов
/ 18 декабря 2018

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

Я знаю, что можно получить этот результат, используя HTML с тегом picture.

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

В этом примере будет загружено только соответствующее изображение.IE: если браузер шире 650px, будут загружены розовые цветы.Если размер браузера составляет от 465 до 650 пикселей, будут загружены белые цветы.В противном случае оранжевые цветы будут загружены.

Но использование тега <picture> не кажется подходящим решением, поскольку его не следует использовать для покрытия всего экрана.

Поскольку яработая с фоновым изображением, я хотел бы установить свое изображение со свойством CSS background-image на моем теле.IE:

body {
    background-image: url("my-large-image.png");
}

Вот что у меня сейчас есть:

@media (min-width: 1000px) {
    body {
        background-image: url("my-small-image.png");
    }
}
@media (max-width: 999px) {
    body {
        background-image: url("my-large-image.png");
    }
}

Мой вопрос: в моем последнем примере загружены оба изображения или только изображение соответствующего размера?Если загружены оба изображения, как бы вы изменили его, чтобы загружалось только соответствующее фоновое изображение?

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Рассматривали ли вы использовать JavaScript вместо CSS?Потому что, если вы используете JavaScript, вам нужно только добавить прослушиватель событий в окно, получить внутреннюю ширину и изменить фоновое изображение тела в зависимости от ширины.

window.addEventListener("resize",function(){
windowWidth = window.innerWidth
  if(windowWidth >= 1000){
  // Do Something
  }else if (windowWidth < 1000){
  // Do Something 
  }
});

Вот пример, который я сделал на codepen .Кроме того, закажите эту ссылку из W3Schools

0 голосов
/ 18 декабря 2018

При использовании медиазапросов загружается только соответствующее изображение.

См. Эту скрипку: https://jsfiddle.net/qg1xz52n/

При загрузке страницы загружается только первое изображение.При изменении размера браузера загружается второе изображение.Это поведение было подтверждено в Chrome и IE.

Код здесь:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Background image demo </title>
</head>
<body>
<h1> Background image demo </h1>
<style>
    @media (min-width: 1000px) {
        body {
            background-image: url("http://images2.fanpop.com/images/photos/5100000/Cats-wallpaper-cats-5194935-1280-1024.jpg");
        }
    }
    @media (max-width: 999px) {
        body {
            background-image: url("https://media.istockphoto.com/vectors/cat-pattern-kitten-paw-background-vector-id1008277944");
        }
    }
</style>
</body>
</html>
...