如何在呈现 HTML 时添加要执行的处理程序？答案

【问题标题】：How to add a handler to execute when HTML is rendered?如何在呈现 HTML 时添加要执行的处理程序？
【发布时间】：2012-08-11 21:34:03
【问题描述】：

我正在用jQuery 在JavaScript 中编写一个单页网络应用程序。我将 JavaScript 源和 jQuery 添加到 HTML 页面，并注册我的函数以在页面完全呈现时调用。

它可以工作，但我不喜欢在 HTML 中包含 code。

现在我想知道我是否可以摆脱最后一行。在 HTML 中调用$(MyApp.onReady) 是绝对必要的吗？

【问题讨论】：

标签： javascript jquery html client-side

【解决方案1】：

您可以将此代码添加到 myapp.js 文件的尾部，例如：

/* myapp.js */
var MyApp = (function(app, $) {
    // your logic...
    // defining app.onReady function...
    $(function() {
        app.onReady();
    });

    return app;
})(MyApp || {}, jQuery);

【讨论】：

【解决方案2】：

您可以在myapp.js 文件中回复document.ready。这将确保 DOM 树可以使用：

$(document).ready(function () {
    // do whatever you want here, confident that the DOM is loaded
});

如果您需要等到整个页面在浏览器中呈现（图像等），您可以响应加载事件：

$(window).load(function() {
    // everything is rendered in the browser
});

您通常不需要等到load，我建议您先尝试第一个 sn-p，然后再使用第二个。

【讨论】：

$(window).load() 会不会更好？ OP 要求在页面完全呈现时调用该函数
@deifwud 取决于所需的行为，我会将其添加到答案中 - 谢谢。

【解决方案3】：

看看这个问题：Running javascript after page is fully rendered

基本上，您似乎想为 window.onload 设置一个函数，这将在页面呈现后运行。因为我看不到你的 myapp.js，所以我不知道 onReady 函数在那里做了什么。您是否保留该行取决于该功能的作用。正如 Grampa 所说，您可以将该行放在 javascript 文件中。

【讨论】：

【解决方案4】：

您需要在某处致电MyApp.onReady()。如果您将访问 DOM（您可能会访问），是的，您必须等到 DOM 被处理。您可以避免使用document.ready，方法是将MyApp.onready() 放在script 关闭body 标记之前。到那时，DOM 将已经被解析。但是，如果您不访问 DOM，则可以在任何地方执行 MyApp.onReady()。

【讨论】：

【解决方案5】：

您可以将$( MyApp.onReady ); 行放在myapp.js 中。您需要注意的是在加载文件之前加载jQuery。

【讨论】：

【解决方案6】：

$(document).ready在html控件全部渲染完成后调用，你可以把你的代码放在这个方法中，也可以在里面调用你的方法

$(document).ready(function(){
    //your code here
    //$(MyApp.onReady) 
});

【讨论】：