页面初始化：需要onload吗？答案

【问题标题】：Page Initialization: Does one need onload?页面初始化：需要onload吗？
【发布时间】：2012-02-09 20:33:23
【问题描述】：

关于这篇SO 文章和这篇SO 文章。在注意到我的网络应用程序在 IE8 中没有触发后，我查看了这些内容……我现在不关心向后兼容性，但如果它是一行代码，为什么不呢？无论如何，我遇到的另一个问题是 onload 事件等待所有内容加载......所以如果他/她正在等待图像下载，用户无法控制。这让我相信我应该只使用

<script type='text/javascript'>my_initialize_function()</script>

放置在我希望页面初始化的 html 中。

说再见

window.onload = initializePage;

或

window.addEventListener('load',initialize_page);

或任何类似的。

我的问题是：这是初始化页面的有效方法吗？

PS：我没有使用任何库，包括 JQuery...显然我不会尝试初始化尚未加载的元素。

【问题讨论】：

标签： javascript

【解决方案1】：

没有。

jQuery 和类似的库有一个有趣的方法。它们只是以跨浏览器的方式捕获不同的事件，同时使开发人员更容易使用。

让我们考虑以下代码：

<script> document.getElementById('a').innerHTML='b'; </script>
<div id="a"></div>

它可能或可能不起作用取决于浏览器是在找到它时运行javascript还是仅在构建整个文档后运行。

另一方面，如果您使用了正确的事件机制，但文档已已经构建，则不会调用您的代码。

jQuery 联合两种范式以获得无缝且更好的系统。像这样：

var foo = {

  // holds list of callbacks to call when document starts
  stack: [],

  // document not ready yet
  ready: false,

  // add callback to be called when document is ready
  add: function(callback){
      foo.stack.push(callback);
      if(foo.ready)foo.fire(); // document is ready, call fire
  },

  // fire callbacks (document IS ready)
  fire: function(){
      for(var i=0; i<foo.stack.length; i++)
          foo.stack[i]();
      foo.stack = [];

      foo.ready = true; // document IS ready
  }

};

// bind to browser events
window.onload = foo.fire; // TODO: you should use actual events

// example of use
foo.add(function(){
    alert('Document is ready!');
});

【讨论】：

【解决方案2】：

您可以使用jQuery 的$(document).ready() 事件。它在 DOM 完成后触发，但在所有图像加载之前。

【讨论】：