HTML的“onload()”是否与加载javascript的延迟冲突？答案

【问题标题】：Does "onload()" of HTML conflicts with the delay of loading javascript?HTML的“onload()”是否与加载javascript的延迟冲突？
【发布时间】：2016-03-28 08:58:51
【问题描述】：

问题是，我将 Annotorious 添加到我的 openSeadragon 项目中。 http://annotorious.github.io/demos/openseadragon-preview.html 要启动此插件，以下是选项。

<script>
  function init() {
    anno.makeAnnotatable(document.getElementById('myImage'));
  }
</script>
...
<body onload="init();">
  <img src="example.jpg" id="myImage" />
</body>

这是问题所在，我使用这些来延迟在查看器块上加载 javascript。

<script type="text/javascript">
 if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

一旦我添加 onload="init();"到我的代码。查看器将无法运行。

这两者之间有冲突吗？如果是，如何解决？

【问题讨论】：

您在 init 函数中使用 anno.makeAnnotatable。相关库是否与之前包含在您的页面中的库相关？
是的，是的。@techie_28
打开浏览器控制台并重新加载页面，看看是否有任何JS错误。

标签： javascript jquery html openseadragon

【解决方案1】：

我认为这应该会有所帮助：

<script type="text/javascript">
 var htmlOnLoad = window.onload;
 window.onload = function(e){htmlOnLoad(e); downloadJSAtOnload(e)};
</script>

这个想法是保持处理程序与 HTML 绑定并调用两者：html- 和 js- 处理程序。

【讨论】：

那无济于事。这会尝试使用由脚本创建的对象，这些对象不仅没有完成下载，而且还没有开始下载。这将引发异常，因此 downloadJSAtOnload 甚至不会运行。
哪些脚本没有下载完成？这里唯一的假设是定义了函数 downloadJSAtOnload。
——downloadJSAtOnload 导致下载和htmlOnLoad 依赖的那些。
如果您考虑整个上下文，同意 - 它不会起作用。问题是关于 init() 没有运行，可能是一个误解，因为它实际上运行抛出异常。

【解决方案2】：

加载行为是这样的：（可能取决于浏览器类型 - 行为可能会改变 - 我在 chrome 上工作）

如果您设置 body onload="_fn" 它将在页面加载时起作用
如果您在页面脚本顶部（body 标记之前）添加 window.onload=_fn，它们都会加载（2 然后 1）
如果您将在 HTML 的最底部区域添加 window.onload。它将是唯一在页面加载时执行的。（正文“onload”将被覆盖）
向窗口添加事件侦听器 - 您可以根据需要添加任意数量的事件，它们将分别按顺序加载。

【讨论】：

【解决方案3】：

当加载事件触发时，您尝试做两件事：

致电init（后者又致电anno.makeAnnotatable）
异步加载使anno.makeAnnotatable可用的JavaScript

你不能在函数存在之前调用它。您必须延迟init 的调用，直到downloadJSAtOnload 触发的JS 加载完成。（具体取决于downloadJSAtOnload 的工作方式）。

【讨论】：

我把downloadJSAtOnload放在body底部，这样调用init：。所以你说这是错误的顺序？
@ho.yq — 不完全是。我是说 downloadJSAtOnload 是异步的。
@ho.yq — 你如何解决它取决于downloadJSAtOnload 的工作方式。