Question

我有下面的测试代码。我期待Firefox显示第一个图像，执行延迟并暂停第二个图像的检索，然后显示“Hello”和第二个图像。

为何在延迟后立即显示所有内容？

更新：我需要添加更多说明。我不是在尝试编写生产代码。我读到浏览器会暂停执行js脚本直到完成，然后继续显示脚本标记后出现的内容。这包括在其他浏览器连接上检索图像。我试图证明这是实际发生的事情，但事实并非如此。

<body>
<img src="images/web.gif" /><br />
<script type="text/javascript">
  document.body.innerHTML = "";
  for (var i = 0; i < 1000000000; i++) {
  }
  document.write( "hello<br />");
</script>
<img src="images/web2.gif" /><br />
</body>

Answer 1

好吧，在脚本部分中内联document.write实际上会让浏览器直接解释它，因为你可以在那里输出各种各样的东西，包括例如注释开始（<!--），这将使其余部分无效。 / p>

如果要避免阻止页面加载的Javascript执行，则应使用外部文件和defer属性。这将告诉浏览器不需要立即解释此脚本，以便浏览器可以继续呈现页面：

<script type="text/javascript" src="delay.js" defer="defer"></script>

但是，如果这样做，您将无法像在示例中那样使用document.write内联输出。但那应该不是问题。您可以在同一位置添加a，并在脚本中包含以下内容。

document.getElementById("output").innerHTML = "Hello";

此外，如果您在脚本上使用defer，那么您的脚本的变量将无法立即用于您应用中的其他非延迟脚本块（出于显而易见的原因，它们可能尚未加载！）。

其次，不要使用循环来模拟延迟。我无法强调这有多糟糕。我假设你只是为了简单起见而使用它。

Answer 2

尽管如此......使用这样的循环作为计时器违反了我所信仰的一切！（我不知道这里是否应该是一个眨眼的笑脸......因为我的意思是，但这不是对你的侮辱）

JavaScript中有一个timer-object，有几个jQuery插件，请使用其中一个。因为Firefox很可能要么将循环优化为空，要么非常快地执行它。

编辑：第二个想法，Firefox最有可能在执行JavaScript之前先加载整个文档。

Answer 3

这是一种完成你想要的方法;我正在使用jQuery库来简化它，所以我也加入了语句来加载Google！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
  // This won't execute until the page has actually loaded
  $(document).ready(function() {   
    // The number is miliseconds; in this case a 5 sec wait
    // and the text is the name of the function to call.
    window.setTimeout(addImage,5000);
  });

  function addImage() { 
     $('body').append('<img src="book.jpg" />');
  }
</script>

这实现了你的目标。加载页面后，它将等待5秒（或您指定的任何时间）然后它将添加第二个图像（在我的桌面上我使用相同的图像两次，以验证这是否正常工作）。

Firefox会在检索图像时显示图像吗？

3 个答案: