html - 根据屏幕大小隐藏图像并阻止它们下载？

Question

我尝试在小屏幕上显示特定图像，在大屏幕上显示不同图像。

我知道这可以通过媒体查询来实现，但我担心即使将显示设置为无，也会下载两个图像。

我知道 srcset 但担心它在 IE 中不受支持。

我也花了一些时间在谷歌上搜索，但关于这个主题的所有帖子似乎都已有 4 年历史了。

那么，在不下载隐藏图像的情况下处理多个图像并针对不同屏幕尺寸显示/隐藏它们的现代方法是什么？

Answer 1

您可以将图像定义为 DIV 的背景图像。然后你使用媒体查询和移动优先的方法，比如

.my_div1 {
  display: none;
  background-image: none;
}
@media screen and (min-width: 768px) {
  .my_div1 {
    display: block;
    background-image: url(image1.png);
  }
}

只有当屏幕 >= 768px 时才会加载图像。