时间戳

首页 > 解决方案 > 如何在不影响页面加载的大型内容绘制的情况下加载高分辨率背景图像

javascript - 如何在不影响页面加载的大型内容绘制的情况下加载高分辨率背景图像

问题描述

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

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

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

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

在此处输入图像描述

标签： javascript

解决方案

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

我更喜欢这样的东西：

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

推荐阅读