如何在加载之前用Javascript替换网页的背景图片？

Question

我目前正在覆盖我玩的网页游戏的CSS，以提供更愉快的用户体验。我遇到的唯一问题是正确替换背景图像，因为在脚本将其替换为纯色之前，原始背景图像会加载到屏幕上。我用负载替换它的纯色，但直到页面加载后才会这样。

Here is a gif of the issue I am running into.

我已经尝试过使用document.onload，.onDomContentLoaded，.ready等，但出于某些原因，这些都不起作用。有没有什么办法可以防止在脚本运行之前加载背景图像？

Answer 1

window.onload将等待加载所有资源。

然而，听起来你应该只为元素添加background-color并让背景渲染到它下面。

Answer 2

您是否尝试过重要的物业？ background-color: gray !important
我认为这应该可以防止图像出现

Answer 3

将其放在外部 Javascript文件中，并在head之前的任何其他内容之前提出请求。

var myImage = new Image();
myImage.src = 'your_image_here';

外部Javascript文件会阻止页面的呈现。在下载图像之前，脚本本身不会完成。因此切换背景时不会有任何延迟。

Answer 4

您可以使用：

document.style.backgroundImage =＆＃34; URL（＆＃39; img.png＆＃39;）＆＃34 ;;

Answer 5

我相信AmmarCSE暗示可能的答案，但原因不明。

您应首先查看HTML以了解资源的加载顺序。 CSS是加载的资源，可以指定背景颜色和图像。这可能解释如下：

如果你的CSS指定颜色/图像资源，并且HTML在执行文档功能之前加载CSS资源，你将继续得到这种行为。

你应该检查背景图像/颜色的CSS并在那里更改它，而不是试图用文档函数覆盖它。

这是对问题的假设。您应该在原始帖子中提供一些HTML，JavaScript和CSS，以帮助其他人回答和审核。