Javascript 窗口/图像加载时间 - 这不应该起作用，但确实有效

Question

这是一个简单的程序，用于加载两个图像，将第二个图像放在第一个图像之上，然后使用 setInterval 和不透明度更改淡入或淡出最上面的图像。它工作得很好，尽管查看代码，如果 botPic 在 topPic 之前加载(竞争条件)，它应该会失败。但它没有，我不明白为什么没有。

  window.onload = function() {
    var topPic = document.getElementById("topPic");
    var botPic = document.getElementById("botPic");
  }

  function findPosition(obj) {
    var curleft = 0;
    var curtop = 0;
    if (obj.offsetParent) {
      do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      } while ((obj = obj.offsetParent) !== null);
    }
    return [curleft, curtop];
  }

  function doTopPicLoad() {
    topPicLoaded = 1;
    if (botPicLoaded == 1) {
      startFader();
    }
  }

  function doBotPicLoad() {
    var leftTop = findPosition(botPic);
    topPic.style.left = leftTop[0];
    topPic.style.top  = leftTop[1];
    botPicLoaded = 1;

    if (topPicLoaded == 1) {
      startFader();
    }
  }

  function startFader() {
    // do stuff
  }

  <img id="botPic" onload='doBotPicLoad()' src="DMH_0991-M-72-720x576.jpg">
  <img id="topPic" onload='doTopPicLoad()' src="DMH_0991-72-720x576.jpg">

无论是通过 console.log 还是通过插入到 DOM 中进行记录，总是将“window.load”显示为最后执行的项目。 doTopPicLoad 和 doBotPicLoad 以不同的顺序出现，但它们总是将 topPic 和 botPic 显示为有效对象。

topPic.onload [object HTMLImageElement] [object HTMLImageElement]
botPic.onload [object HTMLImageElement] [object HTMLImageElement]
startFader
window.onload

但是，如果我这样开始，它通常(总是？)会失败。

var topPic;
var botPic;

window.onload = function() {
  topPic = document.getElementById("topPic");
  botPic = document.getElementById("botPic");
}

我唯一的想法:

Javascript 解释器“知道”它必须延迟执行任何引用在 window.onload 函数内声明的任何变量的语句 - 直到该函数完成。 (这似乎很牵强，但它会解释它)。

我不想在我的代码中留下竞争条件，但似乎并没有发生任何实际的“竞争”。谁能解释为什么这段代码总是有效？

实例: http://www.davehennessey.com/photography/small-buildings/DMH_0991X2.html

谢谢 - 戴夫

Answer 1

您的窗口“加载”处理程序正在设置两个本地 变量。您的脚本直接引用“topPic”和“botPic”<img> DOM 元素。如果这两行不是以 var 开头，事情不会真正改变，因为“topPic”和“botPic”已经指的是那些对 .getElementById() 的调用将返回的值。 .

也就是说，当您的代码(在窗口“加载”处理程序之外)引用变量“topPic”和“botPic”时，它访问的是通过这些名称绑定(bind)到窗口对象的 DOM 元素。浏览器这样做是因为元素具有那些“id”值。

因为这些函数直到 <img> 才被调用元素“加载”事件触发，一切正常。 (设置 <img> 元素的“样式”将在图像加载之前正常工作。)您的窗口“加载”处理程序是多余的，对系统根本没有影响。