Question

在我的网页上，我有一个使用以下 CSS ＆amp; 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

是。只要您的图像位于＆＃34; /wp-content/uploads/2016/10/1.jpg"目录中。

您将网站发布在服务器上的文件夹＆＃34; root＆＃34;中，您有＃34; index.html＆＃34;和文件夹structur：＆＃34; root / wp-content / uploads /..."。

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

修改当您的显示宽度低于600像素时，图像将不会显示。对于更聪明的CSS，您可以使用

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

这将使用类＆＃34; item＆＃34;隐藏每个div，所有div都包含在示例中。

Answer 2

此处已回答类似的问题：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出现奇怪的东西：带有背景图像和显示的元素：   没有设置内联不会被下载...但是如果那些他们将是   样式不是内联的。

Answer 3

显示：none不会帮助你。

为了便于阅读，我将“默认”（移动优先）css置于顶部：

.item1 {
  background-image: none;
}

...

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

我的图片是否在手机上加载？

3 个答案: