如何在window.load之前和加载DOM之后执行代码？ [英] How to execute code before window.load and after DOM has been loaded?
问题描述
好的，所以这里是情况：
我有2页：
Ok so here is the circumstance: I have 2 pages:
- 1 x html page
- 1 x外部javascript
现在在html页面中，将有内部javascript编码，允许放置'window.onload'，以及其他特定于页面的方法/函数。
Now in the html page, there will be internal javascript coding to allow the placement of the 'window.onload', and other page specific methods/functions.
但是，在外部javascript中我想要某些东西是在'window.onload'事件被触发之前完成。这是为了允许首先初始化自定义组件。
But, in the external javascript I want certain things to be done before the 'window.onload' event is triggered. This is to allow customized components to be initialized first.
有没有办法确保在触发'window.onload'事件之前在外部javascript中进行初始化？
Is there a way to ensure initialization to occur in the external javascript before the 'window.onload' event is triggered?
我之所以这样说的原因，是尝试制作可重复使用的代码（构建一次 - 全部使用），外部脚本必须检查它是否在'在主html / jsp / asp / php页面中的javascript接管之前命令/检查'。而且我也不是在寻找JQuery中的解决方案@ _ @
The reason I have asked this, is to attempt to make reusable code (build once - use all over), to which the external script must check that it is in 'order/check' before the javascript in the main html/jsp/asp/php page takes over. And also I am not looking for a solution in JQuery @_@
以下是stackoverflow.com上的一些链接我已浏览过一个解决方案：
- Javascript - 如何检测文档是否已加载（IE 7 / Firefox 3）
- 如何检查页面是否已完全加载（脚本和所有内容）？
- 当页面完全加载时执行Javascript
Here are some of the links on stackoverflow.com I have browsed through for a solution:
- Javascript - How to detect if document has loaded (IE 7/Firefox 3)
- How to check if page has FULLY loaded(scripts and all)?
- Execute Javascript When Page Has Fully Loaded
有人可以帮助或指导我找到解决方案，请帮助我们多多赞赏，谢谢：D
Can someone help or direct me to a solution, your help will be muchness of greatness appreciated, please - thanks :D
问候，Craig
[更新回复 - 2012年11月19日]
[updated response - 19 November 2012]
大家好，感谢您的建议和建议的解决方案它们在搜索和测试可行的解决方案时都非常有用。
虽然我觉得我对自己的成绩并不是百分之百满意，但我知道你的建议和帮助让我更接近解决方案，并且确实可以在类似情况下帮助其他人。
Hi all, thanks for you advice and suggested solutions, they have all been useful in the search and testing for a viable solution. Though I feel that I am not 100% satisfied with my own results, I know your advice and help has moved me closer to a solution, and may indeed aid others in a similar situation.
以下是我的想法：
test_page.html
test_page.html
<html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>
<style type="text/css">
div {
border:thin solid #000000;
width:500px;
}
</head>
<body>
<div id="div_1"></div>
<br/><br/>
<div id="div_2"></div>
<br/><br/>
<div id="div_3"></div>
</body>
</html>
loader.js
loader.js
var Loader = {
methods_arr : [],
init_Loader : new function() {
document.onreadystatechange = function(e) {
if (document.readyState == "complete") {
for (var i = 0; i < Loader.methods_arr.length; i++) {
Loader.method_arr[i]();
}
}
}
},
load : function(method) {
Loader.methods_arr.push(method);
}
}
test_script_1.js
test_script_1.js
Loader.load(function(){initTestScript1();});
function initTestScript1() {
document.getElementById("div_1").innerHTML = "Test Script 1 Initialized!";
}
test_script_2.js
test_script_2.js
Loader.load(function(){initTestScript2();});
function initTestScript2() {
document.getElementById("div_2").innerHTML = "Test Script 2 Initialized!";
}
这将确保在调用
This will ensure that scripts are invoked before invocation of the window.onload event handler, but also ensuring that the document is rendered first.
您认为这个可能的解决方案是什么？
What do you guys think of this possible solution?
再次感谢大家的帮助和帮助：D
Thanking you all again for the aid and help :D
推荐答案
基本上，你正在寻找这个：
Basically, you're looking for this:
document.onreadystatechange = function(e)
{
if (document.readyState === 'complete')
{
//dom is ready, window.onload fires later
}
};
window.onload = function(e)
{
//document.readyState will be complete, it's one of the requirements for the window.onload event to be fired
//do stuff for when everything is loaded
};
请参阅MDN 以获取更多详细信息。
see MDN for more details.
请记住，DOM可能会在这里加载，但是这并不意味着已加载外部js文件，因此可能无法访问该脚本中定义的所有函数/对象。如果你想检查一下，你必须使用 window.onload ，以确保所有外部资源都已加载。
Do keep in mind that the DOM might be loaded here, but that doesn't mean that the external js file has been loaded, so you might not have access to all the functions/objects that are defined in that script. If you want to check for that, you'll have to use window.onload, to ensure that all external resources have been loaded, too.
因此，基本上，在您的外部脚本中，您将需要2个事件处理程序：一个用于 readystatechange ，它可以满足您的需要可以在DOMready和window.onload上完成，根据定义，在文档准备好之后，它将被激活。 （这会检查页面是否已满载）。
您知道吗，在IE< 9 window.onload 导致内存泄漏（因为DOM和JScript引擎是两个独立的实体，窗口对象永远不会完全卸载，并且侦听器不是GC的。有一种方法可以解决这个问题，我在这里发布了，这是虽然很啰嗦，但你知道......
So, basically, in your external script, you'll be needing 2 event handlers: one for the readystatechange, which does what you need to be done on DOMready, and a window.onload, which will, by definition, be fired after the document is ready. (this checks if the page is fully loaded).
Just so you know, in IE<9 window.onload causes a memory leak (because the DOM and the JScript engine are two separate entities, the window object never gets unloaded fully, and the listener isn't GC'ed). There is a way to fix this, which I've posted here, it's quite verbose, though, but just so you know...
这篇关于如何在window.load之前和加载DOM之后执行代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
