Question

我目前正在根据浏览器的宽度加载其他背景图片。为了减少带宽，我只希望加载要显示的图像。

我知道可以使用带有图片标签的HTML来获得此结果。

<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：如果浏览器的宽度大于650像素，则会加载粉色花朵。如果浏览器介于465像素和650像素之间，则会加载白色花朵。否则，将加载橙色花朵。

但是使用<picture>标签似乎不是合适的解决方案，因为它不应用于覆盖整个屏幕。

由于我正在使用背景图片，因此我想在自己的身体上使用CSS属性background-image设置图片。即：

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");
    }
}

我的问题是：在我的上一个示例中，是否同时加载了两个图像或仅加载了适当大小的图像？如果同时加载了两个图像，您将如何更改它以便仅加载适当的背景图像？

Answer 1

使用媒体查询，仅加载适当的图像。

查看这个小提琴：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>

Answer 2

您是否考虑过使用JavaScript而不是CSS？因为如果使用JavaScript，则只需在窗口中添加事件侦听器，即可获取内部宽度并根据该宽度更改主体的背景图像。

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

这是我在codepen上做过的一个例子。另外，请从W3Schools

检出此引用

CSS媒体查询图像加载

2 个答案: