我的图像是否正在加载到移动设备上？ [复制]

Question

在我的网页上，我有一个使用以下 CSS 和 HTML 代码的轮播。

即使我将背景设置为display:none，当其宽度低于 600 像素时，我的移动浏览器是否仍会加载这些图像并占用带宽？

---

CSS：

.item1 {
    background-image: url('/wp-content/uploads/2016/11/1.jpg')
}
.item2 {
    background-image: url('/wp-content/uploads/2016/10/6.jpg')
}
.item3 {
    background-image: url('/wp-content/uploads/2016/10/5.jpg')
}
.item4 {
    background-image: url('/wp-content/uploads/2016/10/3.jpg')
}
.item5 {
    background-image: url('/wp-content/uploads/2016/10/2.jpg')
}
.item6 {
    background-image: url('/wp-content/uploads/2016/10/1.jpg')
}
@media all and (max-width: 600px) {
    .item, .item1, .item2, .item3, .item4, .item5, .item6, #myCarousel4, #myCarousel 4 div {
        display: none
    }
}

HTML：

<div class="carousel slide" id="myCarousel4">
<div class="carousel-inner">
<div class="item item1 active">
	<div class="container">
		<div class="carousel-caption"></div>
	</div>
</div>
<div class="item item2">
	<img class="img-responsive">
	<div class="container">
		<div class="carousel-caption"></div>
	</div>
</div>
<div class="item item3">
	<img class="img-responsive">
	<div class="container">
		<div class="carousel-caption"></div>
	</div>
</div>
<div class="item item4">
	<img class="img-responsive">
	<div class="container">
		<div class="carousel-caption"></div>
	</div>
</div>
<div class="item item5">
	<img class="img-responsive">
	<div class="container">
		<div class="carousel-caption"></div>
	</div>
</div>
<div class="item item6">
	<img class="img-responsive">
	<div class="container">
		<div class="carousel-caption"></div>
	</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel4">
	<i class="glyphicon glyphicon-chevron-left"></i>
</a> 
<a class="right carousel-control" data-slide="next" href="#myCarousel4">
	<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>

演示：https://jsfiddle.net/xetvLk6w/

Answer 1

是的。只要您的图像位于“/wp-content/uploads/2016/10/1.jpg”目录中。

您在“root”文件夹中的服务器上发布您的网站，那里有“index.html”和文件夹结构：“root/wp-content/uploads/...”。

因此，无论您在何处打开您的网站，它都会查找目录并找到并加载您的图片。

编辑 当您的显示宽度低于 600 像素时，将不会显示图像。对于更智能的 CSS，您可以使用

@media (max-width: 600px) {
    .item { 
        display: none;
    }
}

这将隐藏每个具有“item”类的 div，所有 div 都包含在示例中。

Answer 2

display: none 帮不了你。

为了可读性，我将“默认”（移动优先）css 放在顶部：

.item1 {
  background-image: none;
}

...

/*note min and em */
@media all and (min-width: 40em) {
  background-image: url('bla.jpg');
}

Answer 3

这里已经回答了一个类似的问题：Does "display:none" prevent an image from loading?

据说

浏览器变得越来越智能。今天您的浏览器（取决于 版本）可能会跳过图像加载，如果它可以确定它不是 有用。

这真的取决于您的浏览器。有些会加载图像，有些则不会，正如对上述帖子的回答所述：https://stackoverflow.com/a/22970996/2700042

这些是上面链接的答案中讨论的基本发现

所以在进一步挖掘之后，我发现了这个，它解释了每个浏览器如何 处理基于 css display: none 的加载 img 资源；

摘自blog post：

Chrome 和 Safari (WebKit)：WebKit 每次都会下载文件 除非通过非匹配应用背景 媒体查询。

Firefox：Firefox 不会下载调用的图像 如果样式被隐藏但仍会下载，则为背景图像 来自 img 标签的资产。

Opera：与 Firefox 一样，Opera 无法加载 无用的背景图片。

Internet Explorer：IE，就像 WebKit 一样 下载背景图片，即使它们有 display: none;

IE6 出现了一些奇怪的东西：带有背景图像和显示的元素： none set inline 不会被下载......但如果那些 样式不会内联应用。