时间戳

首页 > 解决方案 > 我怎样才能让它在 javascript 启动之前加载我的所有 HTML？

javascript - 我怎样才能让它在 javascript 启动之前加载我的所有 HTML？

问题描述

当我的页面加载时，一些 HTML（部分文本/图像）正在加载，然后 javascript 在 HTML 完成加载之前启动（提示出现）。

我想加载所有的 html，然后脚本来。html 包含用户在与 JS 交互时使用的说明，他们目前没有获得完整的说明。

我认为将外部 JS 脚本标记放在结束正文标记之前的底部会使其做到这一点，但它并没有......

var todos = ["Buy New Turtle"];

var input = prompt("What would you like to do?");

while (input !== "quit"){
  //handles input>>>
  if(input === "list") {
    console.log("**********")
    todos.forEach(function(todo, i){
                  console.log(i + ": " + todo);
                });
                console.log("**********")
} else if(input === "new") {
    //ask for new todo>>>
    var newTodo = prompt("Enter new todo.");
    //add to the todo array.
    todos.push(newTodo);
    console.log("You have added a todo.");
  } else if(input === "delete") {
    //ask for index of todo to be deleted
    var index = prompt("Enter index of todo to delete");
    todos.splice(index, 1)
    console.log("Your todo has been deleted.");
  }
  input = prompt("What would you like to do?");
}
console.log("OK, you quit.");
body{
  border: 5px solid #bdc3c7;
    margin-top: 25px;
    margin-bottom: 100px;
    margin-right: 300px;
    margin-left: 200px;
   padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 75px;
}

h1{
text-align: center;
color: #3FBF7F;
font-family: 'Major Mono Display', monospace;
font-size: 30px;
margin-left: 10px;

}

ul{
  text-align: center;
  color: pink;
  font-size: 25px;
  list-style-type: none;
  display: inline-block;
  position: absolute;
  top: 150px;
  left: 590px;
}

li{
  padding-bottom: 20px;

}

#dogwalk{
  border-radius: 25%;
  transform: rotate(20deg);
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
  margin-left: 50px;
  margin-top: 0px;
}

#runninggirl{
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-left: 550px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ToDo List</title>
    <link rel="stylesheet" href="todolist.css">
    <link href="https://fonts.googleapis.com/css?family=Fahkwang|Major+Mono+Display" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">



  </head>
  <body>
  <h1><u> Amelia's ToDo List </u> </h1>

  <img id="dogwalk" src="dogwalk.jpg">
  <img id="runninggirl" src="runninggirl.png">
<ul>
  <li <i class="far fa-bell"></i><strong> new </strong> - Add A Todo</li>
  <li><i class="far fa-bell"></i><strong> list </strong>- List all Todos</li>
  <li><i class="far fa-bell"></i><strong> delete </strong> - Remove a Specific Todo</li>
  <li><i class="far fa-bell"></i><strong> quit </strong>- Quit App</li>
</ul>


<script src="todolist.js"></script>
 </script>
</body>
</html>

标签： javascriptscripting

解决方案

您可以为此使用 window.onload：

window.onload = function() {
  init();
  doSomethingElse();
};

查看https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload了解更多信息。

推荐阅读