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

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

line1，line2和line3实际上是按顺序执行的，只是第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和把网址给你的副本中的src这里，如果你出于某种原因想你的网站离线运行）;

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

你可以将所有的javascript放在head部分，它会等待页面加载。

Answer 3

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

但是，提示是UI阻止操作。当提示触发时，您的图像可能尚未加载。提示将导致浏览器只是坐在那里直到用户做某事，所以即使图像在提示时间内加载，它也不会显示，直到用户操作解锁UI。

请参阅此类似问题：Does inline javascript block the UI thread?

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

3 个答案: