用JavaScript在HTML中执行的顺序是什么？

Question

我是JavaScript初学者。 有人可以解释在我的代码中执行line1，line2和line3的顺序吗？ 我认为它应该首先在网站上显示该段落（第1行），然后显示图片（第2行），最后提示。

但是，发生的事情是它首先显示了该段落（第1行）并提示（第2行）。 提示得到一些输入后，将显示图片。 这是为什么？

我的代码如下：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body BGCOLOR = "white">
      <p>paragraph 1</p> <!--line 1-->
      <img name = "img1" src = "http://vignette2.wikia.nocookie.net/ironman/images/e/e3/Iron_man_the_game_1.jpg/revision/latest?cb=20100520163628"> <!--line 2-->
      <script type = "text/javascript">
          var index = parseInt(prompt("enter a number",1));//line3
      </script>
  </body>
</html>

Answer 1

这是因为图像加载需要一些时间。

第1行，第2行和第3行实际上确实按顺序执行，只是到提示出现时，第2行还没有完成检索其图像。 然后，页面冻结，等待该提示完成。

如果您想确保在提示出现之前显示图像，请执行此操作（请注意，纯JavaScript而不是jquery，因为您是初学者）

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body BGCOLOR = "white" onload="loadprompt()">
      <p>paragraph 1</p> // line 1
      <img name = "img1" src = "http://vignette2.wikia.nocookie.net/ironman/images/e/e3/Iron_man_the_game_1.jpg/revision/latest?cb=20100520163628"> // line2 
      <script type = "text/javascript">
        function loadprompt(){
                var index = parseInt(prompt("enter a number",1));//line3
    }
      </script>
  </body>
</html>

看到这里： http : //www.w3schools.com/jsref/event_onload.asp

Answer 2

您可以使用它来使javascript等待页面的其余部分加载：

<script type = "text/javascript">
  $(document).ready(function() {
    var index = parseInt(prompt("enter a number",1));
  }
</script>

然后，您还需要添加它，因为它使用jQuery（如果出于某种原因希望离线运行网站，则可以下载jQuery并将URL作为src放在副本中）；

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

您可以将所有javascript放在标题部分，尽管如此，它仍将等待页面加载。

Answer 3

渲染通常是渐进式的，因此您应该看到第1段，然后如果加载了img，它将显示，然后提示您，因为您没有在事件上运行此脚本，例如页面加载完成时。

但是，提示是UI阻止操作。 提示触发时，您的图像可能尚未加载。 提示将导致浏览器一直坐在那里，直到用户执行某项操作为止，因此，即使图像在提示时间内加载，它也不会显示，直到通过用户操作解锁UI为止。

看到类似的问题：内联JavaScript是否会阻塞UI线程？

用JavaScript在HTML中执行的顺序是什么？

问题描述

3 个解决方案

解决方案1
3 已采纳 2015-04-23 23:30:24

解决方案2
2 2015-04-23 23:25:51

解决方案3
0 2015-04-23 23:23:53

用JavaScript在HTML中执行的顺序是什么？

问题描述

3 个解决方案

解决方案1 3 已采纳 2015-04-23 23:30:24

解决方案2 2 2015-04-23 23:25:51

解决方案3 0 2015-04-23 23:23:53

解决方案1
3 已采纳 2015-04-23 23:30:24

解决方案2
2 2015-04-23 23:25:51

解决方案3
0 2015-04-23 23:23:53