如何延迟加载大背景图像

Question

如何延迟/推迟加载大背景图像？我问这个问题的原因是因为当我在页面上运行性能测试时，我的“第一个有意义的颜料”得分很低。我尝试尽可能减少图像尺寸。

Answer 1

如果是背景图片，您可以使用Javascript onLoad事件。此事件仅在整页加载完毕后才会生效。

示例：

function loadBGIMG(){
    document.getElementById("any-menu").style.backgroundImage="url(../images/any-menu.jpg)";
}
window.onload=loadBGIMG();

Answer 2

第一个有意义的绘画（我称之为 FMP）不一定是图像。如果 FMP 不必是背景图像（它可以是 h1、p 或其他元素），您可能可以将引用图像的行分隔在单独的文件中，以便其他组件可以被绘制而不会被下载图像。