javascript - 页面初始化: Does one need onload?

Question

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

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

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

然后说再见

window.onload = initializePage;

或

window.addEventListener('load',initialize_page);

或任何类似的。

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

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

Answer 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!');
});