在文档完全加载之前执行的主干脚本答案

【问题标题】：Backbone script executing before document fully loaded在文档完全加载之前执行的主干脚本
【发布时间】：2014-05-29 19:20:29
【问题描述】：

我正在构建我的第一个带有主干的 Rails 应用程序，并且由于资产管道，即使在文档完全加载之前，Javascript 也会被调用/执行。因此，没有一个事件处理程序被附加。如果我将此 Javascript 放在文档末尾的 HTML 标记之后，那么它似乎可以正常工作。页面完全加载后如何执行此代码？我总是可以使用 jQuery 的 document.ready()，但我希望骨干网有一个内置的过程来处理它。

 <script type="text/javascript">
    (function() {
      "use strict";
      var app;

      app = {};

      app.AppView = Backbone.View.extend({
        el: "body",
        initialize: function() {
          this.playAudio();
        },
        events: {
          "click .play-audio": "playAudio"
        },
        playAudio: function() {
          alert($("span").data("audio"));
        }
      });

      app.appView = new app.AppView();

    }).call(this);

</script>

<div>
    <p>Whatever!</p><span class="glyphicon glyphicon-volume-up play-audio" data-audio="http://my-audio-file"></span>
</div>

【问题讨论】：

Backbone 建立在 jQuery 之上。HTML 页面是自上而下解析的。因此，如果您没有使用像 require.js 这样的 Asyn 库，如果您没有在 DOM.ready 处理程序中声明您的代码，您将始终看到您遇到的问题。它始终是声明 JS 代码的最佳方法在 HTML 之后避免在页面开始呈现之前运行脚本..
谢谢，我会考虑使用 require.js。现在，我可能只是将 JS 脚本标签移动到页面底部 - stackoverflow.com/questions/8038484/…。

标签： javascript ruby-on-rails backbone.js

【解决方案1】：

将您的函数指定为 document.onload 或 window.onload 属性。两者的作用几乎相同，但主要取决于浏览器。

 <script> document.onload=(...your function goes here....) </script>
 //OR
 <script> window.onload=(...your function goes here....) </script>

【讨论】：

谢谢。将我所有的 javascript 移到页面末尾解决了这个问题。 stackoverflow.com/questions/8038484/…

【解决方案2】：

执行代码的最快方法是使用 DOMContentLoaded 事件侦听器：

方法如下：

 <script>
 document.addEventListener("DOMContentLoaded", function(event) {
   //your code here
  });
 </script>

其他有用的事件监听器是：

 window.onload = myfunction() ;
 //or
 document.onload = myfunction();

祝你好运！

【讨论】：

【解决方案3】：

您可以轻松地为此覆盖默认渲染方法。就像这样：（对不起，我的咖啡脚本）

render: () ->
  super()
  @customMethodToRunAfterThePageIsLoaded()

我将它用于页面加载后计算，这些计算通过 jQuery 插入到 html 中。

【讨论】：