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

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> 。

Answer 2

您可以使用模糊图像效果进行延迟加载，为您提供几个有用的链接！

看到这个线程：

#:~:text=attr('large%2Dclass',have%20to%20change%20the%20js!

https://tsucres.me/2017-12-01/Progressive-image-load.html

https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/