是的，它会渲染得更快一点，只是因为它不需要渲染图像，并且在屏幕上少了一个元素来排序。

如果您不想加载它，请将DIV保留为空，以便稍后加载包含<img>标记的html。

尝试使用firebug或wireshark，就像我之前提到的那样，你会看到即使display:none存在，文件也会被传输。

Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit，即使它们的显示设置为none，也会渲染所有图像。

这里有一个测试页面可以证明这一点:

http://www.quirksmode.org/css/displayimg.html

不。如果您正在考虑节省手机用户带宽，图像将像往常一样加载，并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个div的背景图像等，而不是一个标签，因为图像标签将加载图像，无论屏幕大小和媒体查询设置。

** 2019回答**

在正常情况下显示:none不阻止图像被下载

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

但是如果一个祖先元素有display:none，那么后代的图像将不会被下载

/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

其他阻止下载映像的情况:

1-目标元素不存在

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2-两个相等的类加载不同的图像

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

你可以在这里观看:https://codepen.io/juanmamenendez15/pen/dLQPmX

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

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

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

如果你让图片成为CSS中一个div的背景图片，当这个div被设置为“display: none”时，图片将不会被加载。当CSS被禁用时，它仍然不能加载，因为CSS是禁用的。