Javascript 加载特定图像，然后加载整个页面

我有一个背景图片和很多产品图片。很快，整个页面的%88是图像。但是当我刷新页面时。一些产品正在展出。之后我的背景就来了。然后其他部门，图片也来了

我想做的是先看我的背景图片。然后必须显示其他。同步或异步并不重要

我的尝试： 我将背景图像div替换到dom的顶部。没用

window.onload=function () {
document.getElementById("theBackgroundImage").style.visibility = "visible";
}

也不管用

---

我以前试过几种方法。但我还是有同样的问题

尝试将css文件中的以下内容移到顶部

#theBackgroundImage{ background : url(..) } #背景图像{ 背景：url（…） }

---

也许您需要使用（延迟加载图像）=>

首先，您需要检测何时加载所有图像。或者，当您希望首先显示所有图像时

然后我在这里看到两种选择。对于这两种情况，我将使用一个库来帮助检测何时加载了图像：

第一选项

只需显示您的图像

imagesLoaded（'img'，function（）{
document.querySelectorAll（“.displayAfter”）.forEach（e=>e.style.visibility='visible'
)
});
.displayAfter{
可见性：隐藏；
}

图片如下：
此处延迟加载图像：
您是否使用库进行延迟加载？如果是这样的话，您可以从延迟加载中排除bg映像吗？您所做的只是更改映像的可见性。它仍然由浏览器加载。您需要在图像加载后延迟加载图像。另外，你认为你真的需要一个占页面88%（基于大小）的图像吗？不，我现在不使用延迟加载。但我之前认为使用延迟加载时，我整个页面的%88是图像。只有这一页，没有文字，空白区域。只显示图像。有趣。我对'datasrc'使用相同的方法。顺便说一句，这将仅在使用scroll事件上的侦听器可以看到图像时加载图像。可能不是OP想要的。我正在动态创建所有图像。刚刚添加了数据src和一些passjavascript的id，并完成了它。我喜欢这样。谢谢我用了第二种选择。