我们说的是图像不能在手机上加载，对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}

那么，它难道不会只寻找超过一定屏幕宽度的图像吗?

浏览器正变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载，如果它可以确定它是没有用的。

图像有一个显示:none样式，但它的大小可以由脚本读取。 Chrome v68.0不加载图像如果父隐藏。

你可以在那里查看:http://jsfiddle.net/tnk3j08s/

您也可以通过查看浏览器开发工具的“network”选项卡来检查它。

注意，如果浏览器是在一个小的CPU计算机上，不需要渲染图像(和布局页面)将使整个渲染操作更快，但我怀疑这在今天是否真的有意义。

如果你想阻止图像加载，你可以不添加IMG元素到你的文档(或设置IMG src属性为"data:"或"about:blank")。

浏览器似乎仍然下载图像，即使他们直接或间接隐藏的display: none属性。

我发现防止这种情况发生的唯一标准方法是使用img标签的loading属性:

<img src="https://cdn.test/img.jpg" loading="lazy">

除了Safari和Firefox Android，所有最新的浏览器都支持它。

MDN img加载属性规范。

为了防止获取资源，使用Web Components的<template>元素。

如果你让图片成为CSS中一个div的背景图片，当这个div被设置为'display: none'时，图片将不会被加载。

只是在扩展布伦特的解决方案。

对于纯CSS解决方案，您可以执行以下操作，它还可以使img框实际表现为响应式设计设置中的img框(这就是透明png的用途)，如果您的设计使用响应式动态调整图像，这尤其有用。

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

只有在触发与visible-lg-block绑定的媒体查询并且display:none被更改为display:block时，图像才会被加载。透明png用于允许浏览器在流体设计中为<img>块(因此是背景图像)设置适当的高宽比(height: auto;宽度:100%)。

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

所以你最终会得到如下3个不同的视口:

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

在初始加载期间，只有默认的媒体视口大小的图像加载，然后，根据您的视口，图像将动态加载。

没有javascript!

使用@media query CSS，基本上我们只是发布了一个项目，我们在桌面上有一个巨大的树的图像，但没有显示在桌面/移动屏幕上。所以防止图像加载非常简单

下面是一个小片段:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

你可以使用相同的CSS来显示和隐藏显示/可见/不透明度，但图像仍在加载，这是我们想出的最安全的代码。