我正在尝试为一个移动网站创建一个图库，其中我为不同大小的设备提供了不同的样式表。在这些样式表中，我有几个类，它们只是为图库中想要的每个图像设置一个背景 url 属性。
一次只显示其中一个。我将使用 Javascript 循环浏览这些类，以幻灯片类型的演示文稿显示它们。
我想知道这种方法是否比将所有图像作为 DOM 中的单个 img 标签更节省带宽？通过设置这些 url 属性，它们是在用户首次加载站点时下载到用户的浏览器中，还是仅在 DOM 中的div 上设置类时下载？
只是我试图避免一次将所有不同的图像下载到用户的设备。如果您知道任何更适合此类事情的替代方法，我也感兴趣。
你是对的，当你设置图像背景时，只有在使用它时才会被下载，我的意思是，用作某些 dom 元素上的样式。或者，您可以使用javascript"更改"背景图像css属性。这样，您的 CSS 中甚至没有图像网址。
如果带宽是您最关心的问题，我建议您查看Chrome或safari等webkit浏览器中的检查器，或者使用Firefox上的Firebug以查看"网络"选项卡，在那里您可以清楚地了解加载的内容，如何（顺序）以及如何优化事物。你也可以犯一些愚蠢的错误，比如从不同的位置多次下载同一个库等等。
如果你只是在css中声明这个类，那么在设置之前它不应该下载任何内容。 然而，这是一个圆形的问题，答案可以采取许多不同的形式。
所以我想说，是的，这是一个很好的方法，它应该更节省带宽（如果你不知道所有图像最终都会被加载，因为你通常会有异步图像加载任何一种方式它应该没有多大关系。我想如果您最初只加载一个图像，其他图像（即提到的 img 标签）不会干扰使加载更流畅一些？
我发现这是一个更干净的解决方案，至少如果您不确定将查看哪些图像（可能会相信）使用您的 css 方法。 此外，它更容易维护和提供更好的设计。
你将使用javascript表明你也在做客户端。这使您可以控制选择做什么，这是一个很好的:)
一种替代方法也可以是拥有图像的本地缓存，但这实际上取决于手头的问题，如果您将拥有不同的图像并且没有真正的可能性提前知道您将需要哪些图像（甚至可能不知道有多少？）那么我认为最干净的方法是您的目的。
即为图像设置（或动态创建）CSS类并处理JavaScript中的所有逻辑。