javascript - 为什么 Javascript Listener 知道图像已加载，而 js 是加载序列中的最后一个文件？

Question

当我尝试从developers.google.com学习Promise时，我发现有这样的代码。

<img id="img1" src="images1.jpg">
<script>
    var img1 = document.querySelector("#img1");
    img1.addEventListener("load", function(){
      alert("yes");
    });
    img1.addEventListener("error", function(){
      alert("no");
    });
</script>

这段代码与google页面上的代码不完全相同，但功能应该是相同的。

当我看到这个时，我很好奇，因为脚本标签位于页面的最底部，“它应该先加载img，然后加载js文件，所以在js文件工作后，它无法检测img是否加载或不是”我想，所以我在编辑器中模拟了这段代码，结果证明它有效。

我尝试在google中搜索，发现它肯定是从上到下的HTML加载，在某些新浏览器中可能不一样，然后我在chrome中打开开发工具并尝试从网络中学习一些东西，它也是顺序应该是，html、图片文件、js。

我需要帮助，我不明白，我是否缺少一些基本的加载知识？或者“加载”监听器不像我想象的那样工作？

谢谢。

Answer 1

嗯，这需要了解浏览器如何读取 HTML 文档并将其显示给用户。这是您的代码，但略有扩展

<p>start page</p>
<img id="img1" src="images1.jpg">
<script>
    var img1 = document.querySelector("#img1");
    img1.addEventListener("load", function(){
      alert("yes");
    });
    img1.addEventListener("error", function(){
      alert("no");
    });
</script>
<p>end page</p>

I try to search in google and found that it is surely HTML load from top to bottom

是的，它按照从上到下的顺序读取上面的内容。传入的流将按照其进入的顺序进行解析。因此第一段文本为 start page首先阅读，然后是图像，然后是脚本，然后是最后一段。如果一个元素包含子元素，这些子元素也会从上到下读取，直到读取下一个元素。

但是当它读取一个元素时，比如<img> ，它会发起一个新请求来检索图像，在src中定义。属性。这是在单独的任务中完成的。

在图像元素之后，它找到一个 <script>标签。在这里，其内容随后被发送到浏览器的虚拟机以运行脚本代码。 VM逐步执行代码。在您的脚本中，您已指示

1. find the img1 element
2. listen to its "load" event
3. listen to its "error" event.

但是，这个过程完成得非常快，浏览器能够在加载图像之前解析脚本。步骤 1 始终会成功，因为该元素存在且脚本随后运行。如果将图像元素放在脚本后面，则会失败。

第 2 步何时成功取决于图像文件的大小、网络、文档内容、处理脚本的时间等...如果将该代码包装在函数中并使用 setTimeout()经过一段时间后，警报将不会显示，因为在 Hook 这些事件监听器之前图像文件已经显示。下面是两个带有超时的交互式示例:

没有超时

<p>start page</p>
<img id="img1" src="images1.jpg">
<script>
  console.log('without timeout');

  function f() {
    console.log('alert?');
    var img1 = document.querySelector("#img1");
    img1.addEventListener("load", function() {
      console.log("yes");
    });
    img1.addEventListener("error", function() {
      console.log("no");
    });
  }
  
  f();
</script>
<p>end page</p>

有超时

<p>start page</p>
<img id="img1" src="images1.jpg">
<script>
  console.log('with timeout');

  function f() {
    console.log('alert?');
    var img1 = document.querySelector("#img1");
    img1.addEventListener("load", function() {
      console.log("yes");
    });
    img1.addEventListener("error", function() {
      console.log("no");
    });
  }
  
  window.setTimeout(f, 1000);
</script>
<p>end page</p>