如何在Javascript程序运行之前加载背景图像？_Javascript_Html

如何在Javascript程序运行之前加载背景图像？

javascript html

如何在Javascript程序运行之前加载背景图像？,javascript,html,Javascript,Html,我试图在加载JavaScript程序之前加载HTML背景图像。当前加载JavaScript程序，然后在程序完成后，将显示背景图像。我是一个新的编码，所以任何帮助将不胜感激 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

我试图在加载JavaScript程序之前加载HTML背景图像。当前加载JavaScript程序，然后在程序完成后，将显示背景图像。我是一个新的编码，所以任何帮助将不胜感激

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body background="9-RPS-example.png">

<script type="text/javascript ">
    const computerchoice = ["r ", "p ", "s "];

    let wins = 0;
    let losses = 0;
    let ties = 0;

    for (let i = 0; i < 10; i++) {

        computerguess = computerchoice[Math.floor(Math.random() * computerchoice.length)];

        console.log(computerguess);

        alert("Welcome to RPS!!! You Know what Beats what. Press Ok to play ");
        var userguess = prompt("Choose r, p , or s. Sorry no Spocks allowed ");
        console.log(userguess);
        userguess = userguess.toLowerCase();
        // if (userguess === "r " || userguess === "p " || userguess === "s ") {
        // alert("The Computer Guessed " + computerguess + " You Guessed " + userguess)
        if ((userguess === "r " && computerguess === "s ") ||
            (userguess === "p " && computerguess === "r ") ||
            (userguess === "s " && computerguess === "p ")) {
            wins++;
            alert("The Computer Guessed " + computerguess + " You Guessed " + userguess + " 
You Won " + wins + " Time(s) ")
        } else if ((userguess === "r " && computerguess === "p ") ||
            (userguess === "p " && computerguess === "s ") ||
            (userguess === "s " && computerguess === "r ")) {
            losses++;
            alert("The Computer Guessed " + computerguess + " You Guessed " + userguess + " 
You lost " + losses + " Time(s) ")
        } else if (userguess === computerguess) {
            ties++;
            alert("The Computer Guessed " + computerguess + " You Guessed " + userguess + "  
You Tied " + ties + " Time(s) ")
        } else
            alert("You did not guess r, p or s...Dummy ")
    }
</script>

</body>

</html>˚


文件
const computerchoice=[“r”、“p”、“s”]；
让wins=0；
设损失=0；
设ties=0；
for（设i=0；i<10；i++）{
computerguess=computerchoice[Math.floor（Math.random（）*computerchoice.length）]；
console.log（computerguess）；
警告（“欢迎来到RPS！！！你知道什么比什么强。按Ok播放”）；
var userguess=prompt（“选择r、p或s。对不起，不允许使用spock”）；
log（userguess）；
userguess=userguess.toLowerCase（）；
//如果（userguess==“r”| | userguess==“p”| | userguess==“s”）{
//警报（“计算机猜测”+计算机猜测+“您猜测”+用户猜测）
如果（（userguess==“r”和&computerguess==“s”）||
（userguess==“p”和&computerguess==“r”）||
（userguess==“s”和&computerguess==“p”））{
wins++；
警报（“计算机猜测”+计算机猜测+“您猜测”+用户猜测+”
你赢了“+赢了+”次”
}else if（（userguess==“r”和&computerguess==“p”）||
（userguess==“p”和&computerguess==“s”）||
（userguess==“s”和&computerguess==“r”））{
损失++；
警报（“计算机猜测”+计算机猜测+“您猜测”+用户猜测+”
您损失了“+损失+时间”
}else if（userguess==computerguess）{
ties++；
警报（“计算机猜测”+计算机猜测+“您猜测”+用户猜测+”
你打了“+ties+”次”
}否则
警报（“你没有猜到r、p或s……傻瓜”）
}
˚

应该使用CSS属性设置背景图像。尝试用

style=“background image:url（'9-RPS-example.png'）”替换background
标记。

我似乎无法实现此功能。仍然无法加载图像。很抱歉，我没有仔细查看您的代码。背景图像无法设置为那样。我将更新我的答案。我添加了和窗口。addEventListener（'load'，function（）{javascript here}）；运气不佳。程序在背景之前加载。

<body style="background-image: url('9-RPS-example.png')">