window.onload 不调用函数答案

【问题标题】：window.onload not calling functionwindow.onload 不调用函数
【发布时间】：2015-04-13 02:02:35
【问题描述】：

有了这个 index.html：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script data-main="main" src="require.js"></script>
    </head>
    <body>
        <p>This is the body</p>
        <canvas id="canvas1"></canvas>
    </body>
</html>

还有这个 main.js

console.log("main.js ran");

function render() {
    console.log("render ran");
}

window.onload = render;

我希望控制台输出显示：

main.js ran
render ran

“main.js 运行”按预期显示，但“渲染运行”没有被记录。渲染函数永远不会被调用。为什么不呢？

【问题讨论】：

嗯，奇怪。在我看来一切都很好。
你如何加载main.js？我怀疑你是在加载窗口后加载它，所以 window.onload 函数运行为时已晚。
@Bermar，很好的发现，但是如果 Vocalionecho 链接了错误的 javascript 文件，为什么 main.js 运行会出现在控制台中。从代码 sn-p 来看，console.log() 都在同一个文件中。
尝试添加
@NewToJS 这就是为什么我认为问题是他在window.onload 运行后加载文件。

标签： javascript html requirejs

【解决方案1】：

RequireJS loads the data-main script asynchronously。因此，页面加载和 main.js 加载之间存在竞争条件。如果 main.js 先完成加载，window.onload 将被设置，您将看到“渲染运行”。如果页面首先完成加载，则不会。这两种结果中的哪一种通常是不确定的，但由于您给出的示例页面非常短，它通常会在从服务器获取 main.js 之前完成加载。

如果您希望您的模块在页面加载后运行，您可以添加对domReady module 的依赖：

<script src="require.js"></script> <!-- note, no 'data-main' -->
<script>require( ['main'], function() {} );</script>

main.js：

define(['domReady!'], function() {
    // ...
});

【讨论】：

这确实有效。仅适用于 Web 编程新手，这里有更多的跟进。
问题是页面在 main.js 可以设置 window.onload 之前完成加载。 require.js 有一个名为 domReady 的附属工具，它允许您设置在 DOM 完全加载后调用的回调数量。

【解决方案2】：

这可能是 RequireJS 的问题以及页面已经加载的事实。 RequireJS 应该已经在等待所有文件加载，所以使用下面的代码。

例子：

console.log("main.js ran");

function render() {
    console.log("render ran");
}

render();

如果您尝试等待加载 HTML 元素，请使用 jQuery：

//will run once the page DOM is ready
$(element).ready(function(){
   ...
});

//will run once the entire page is
//loaded including images and iframes
$(element).load(function(){
   ...
});

【讨论】：

$(element).ready() 与 $(document).ready() 相同。单个元素没有ready 事件。
如果他用的是RequireJS，是不是有自己的功能可以在加载特定文件后运行函数？