<分区>
<分区>
在我的网页上，我有一个使用以下 CSS 和 HTML 代码的轮播。
当背景宽度低于 600 像素时，即使我将背景设置为 display:none，我的移动浏览器是否仍会加载这些图像并耗尽带宽？
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>最佳答案
是的。只要您的图像在目录“/wp-content/uploads/2016/10/1.jpg”中。
您在服务器上的文件夹“root”中发布您的网站，那里有“index.html”和文件夹结构:“root/wp-content/uploads/...”。
因此，无论您在何处打开您的网站，它都会查找目录并查找并加载您的图片。
编辑 当您的显示宽度低于 600px 时，将不会显示图像。对于更智能的 css，您可以使用
@media (max-width: 600px) {
.item {
display: none;
}
}
这将隐藏所有具有类“item”的 div，所有 div 都包含在示例中。
关于html - 我的图像是否正在移动设备上加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41586711/