如何在某些屏幕尺寸上仅加载某些图像？

Question

我认为响应式设计，如果我在大屏幕尺寸上有一组相互淡化的大背景图像并将它们隐藏在较小的屏幕尺寸上，它们是否仍然会在较小的屏幕尺寸上加载？如果图像不显示，我不想使用不必要的带宽。它们似乎没有加载到我的计算机上，但我很难测试每个可能的设置。如果它们确实加载但默认情况下不显示，有没有办法解决这个问题？另外，如果可能的话，我希望无需使用javascript即可使用。

Answer 1

是的，即使您隐藏了图像，大多数浏览器也会下载图像。

单独使用html和css无法停止图像加载。 JS是最好的方法，它也很容易，所以你可能别无选择，只能使用javascript。

只是因为你决定使用javascript你应该检查lazyload，它使用起来非常简单。

http://www.appelsiini.net/projects/lazyload

Answer 2

"Adaptive Images"检测用户的屏幕大小并自动为该特定大小生成缓存。 我之前在一些项目中使用了它，它就像一个魅力。

您可以找到更多信息here和here

你无法避免Javascript，根据我的知识，这是唯一的解决方案。但这很容易，所有步骤都在上面的链接中给出。