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

Posted 2023-03-05

【中文标题】媒体查询中移动横幅的加载时间

【英文标题】：Loading time with mobile banner in media query

【发布时间】：2022-01-24 01:47:15

【问题描述】：

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

.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);
    

【参考方案1】：

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

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

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

【讨论】：

谢谢！很难正确检查（每次加载时时间都不同），但我认为在我的情况下它可以节省大约 30-50 毫秒。我不知道更差的图像质量是否值得，但谢谢！