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

Question

我认为自适应设计，如果我有一组大尺寸的背景图像，在大屏幕尺寸上彼此淡入淡出，并将它们隐藏在较小的屏幕尺寸上，它们仍然会加载较小的屏幕尺寸？如果图像不显示，我不想使用不必要的带宽。看起来他们没有加载我的电脑，但我很难测试每一个可能的设置。如果他们加载并且不默认显示，有什么方法可以解决这个问题吗？另外，如果可能的话，我希望在不使用JavaScript的情况下工作。

Answer 1

是的，大多数浏览器都会下载图片，即使您隐藏了它们。

只用html和css就没有办法停止图像加载。 JS是做这件事的最好方法，它也很容易，所以你可能没有别的选择，只能使用javascript。

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

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

Answer 2

"Adaptive Images"检测用户的屏幕尺寸和自动生成特定大小的缓存。 我以前在我的一些项目中使用过它，它的功能就像一个魅力。

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

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