Html 使用CSS背景url属性在多个图像之间循环是否节省带宽？

我正在尝试为一个移动站点创建一个图库，在这里我为不同大小的设备创建了不同的样式表。在这些样式表中，我有几个类，它们只需为我想要在图库中的每个图像设置一个背景url属性

一次仅显示其中一个。我将使用Javascript在类中循环，以幻灯片形式显示它们

我想知道这种方法是否比将所有图像作为DOM中的单个img标记更具带宽效率？通过设置这些url属性，它们是在首次加载站点时下载到用户浏览器中的，还是仅在DOM中的div上设置类时才下载

---

我只是想避免一次将所有不同的图像下载到用户的设备上。如果你知道任何对这类事情更好的替代方法，我也很感兴趣。

你是对的，当你将图像设置为反向时，只有当它被用作某种dom元素上的样式时，才会下载图像。 或者，您可以使用javascript“更改”背景图像css属性。这样，您的CSS中甚至没有图像url

---

如果带宽是您最关心的问题，我建议您在诸如Chrome或safari之类的webkit浏览器中查看inspector，或者在Firefox上使用firebug查看“网络”选项卡，在那里您可以清楚地了解加载的内容、方式（顺序）以及如何优化内容。你也可能会犯一些愚蠢的错误，比如从不同的位置多次下载同一个库等等。

如果你只是在css中声明类，那么在设置之前不应该下载任何内容。然而，这是一个圆形的问题，答案可能有很多不同的形状

所以我想说，是的，这是一个很好的方法，而且它应该更具带宽效率（如果你不知道所有的图像最终都会被加载，因为你通常会以异步方式加载图像，无论哪种方式，这都不重要。我想如果你最初只加载一个图像，其他图像就会被加载（即，提到的img标签）不会干扰负载，使负载更平稳？）

我发现它是一个更干净的解决方案，至少如果你不确定哪些图像将被观看（这可能是相信的）使用你的css方法。而且它更容易维护和提供更好的设计

您将使用javascript表示您也在做客户端的工作。这让您可以控制选择做什么，这很好：）

另一种选择是对图像进行本地缓存，但这实际上取决于手头的问题，如果您有不同的图像，并且不可能事先知道您需要哪些图像（甚至可能不知道需要多少图像），那么我认为最干净的方式就是您的目的方式

---

i、 为图像设置（或动态创建）css类，并处理javascript中的所有逻辑

在控制台的“网络”选项卡中查看已下载的所有资源。