如何加载高分辨率背景图像而不影响页面加载时的大量内容绘制

Question

我正在使用灯塔来测量页面性能，我注意到，即使我使用低分辨率背景图像并使用 javascript 加载高分辨率背景图像，即使我等到页面完全加载，它仍然会影响灯塔上的大量内容绘画......我缺少什么吗？

window.onload = function () {
        const header = document.querySelector('.header');
        header.style.backgroundImage =
            'url(assets/img/the-image.webp)';
};

这是该页面的链接。加载高分辨率图像时，低分辨率图像隐藏在覆盖层后面

https://nifty-cori-b75591.netlify.app/

Answer 1

我热衷于不使用“背景图像”作为我的高分辨率背景图像。

我更喜欢有这样的东西：

<style>
    .BackgroundImage-Container {
        position: relative;
        width : 100%;
        height : 100%;
    }

    .BackgroundImage {
        position: absolute;
        top : 0;
        right : 0;
        bottom: 0;
        left: 0;
        width : 100%;
        height : 100%;
        object-fit: cover;
    }
</style>

<picture class="BackgroundImage-Container">
    <img class="BackgroundImage" src="./some-image.png" />
</picture>

所以我可以使用任何我喜欢的lazyload, srcset, 。<source media="" ></source>