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

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/:

If the CSS rule specifying the background image does not apply to an element in the document, then the browser does not load the background image. If the CSS rule is applicable to an element in the current document, then the browser loads the image.

所以您的 css 应该可以工作并且应该可以缩短加载时间。您可以使用浏览器的开发工具来检查它。 'network' 选项卡显示浏览器发出的请求，因此您可以使用它来检查它是否正在加载一张图片或同时加载两张图片。