css - 来自所有断点的资源是一次加载还是仅在使用时加载

Question

使用响应式设计解决一些加载时间问题，但我无法在任何地方找到明确的答案。

如果您为不同的断点使用不同的资源，比如在一个断点处使用不同的图像文件，那么无论您从哪个断点查看还是只加载在该断点处使用的图像，都加载两个图像。我们正在使用 css 媒体查询来更改图像

有人建议我们为较小的断点加载较小的图像以加快加载时间，但如果同时加载原始版本和小版本，那显然是无济于事。

Answer 1

如果您使用 <img>元素，所有这些元素都将在页面加载时加载。

如果您使用 CSS 规则(背景 url)设置不同的图像，则只会加载当前应用的图像。

如果您想缩短页面加载时间，请使用图像 Sprite 。使它们可缓存，用户只需加载一次。在大多数情况下，消除对服务器的往返调用所节省的成本大大超过了 sprite 的额外加载时间。