媒体查询中移动横幅的加载时间

Question

在计算机上加载页面时，我有正常的横幅。然而，我希望在移动设备上有更小的版本(这样加载速度更快((媒体查询(。我的问题是：它是如何加载的？在移动设备中更改横幅或页面加载所有文件时，这只是浪费资源，这有什么好处吗？如果这不能改善加载时间，还有其他方法吗？

.banner1 .banner-img{
background-image:url(../Images/banner1.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
@media screen and (max-width:768px){
.banner1 .banner-img{
background-image:url(../Images/banner2.jpg);
}
}

Answer 1

从这里开始https://css-tricks.com/the-complete-guide-to-lazy-loading-images/:

如果指定背景图像的CSS规则不适用于文档中的元素，则浏览器不会加载背景图像。如果CSS规则适用于当前文档中的元素，则浏览器加载图像。

所以你的css应该可以工作，应该可以缩短加载时间。您可以使用浏览器的开发工具进行检查。"网络"选项卡显示浏览器发出的请求，因此您可以使用它来检查它是加载一个图像还是同时加载两个图像。