如何在window.load之前和加载DOM之后执行代码?

Eth*_*nZA 19 javascript javascript-events

好的,这就是情况:我有2页:

  • 1 x html页面
  • 1个外部JavaScript

现在在html页面中,将有内部javascript编码,以允许放置'window.onload',以及其他页面特定的方法/功能.

但是,在外部javascript中,我希望在触发'window.onload'事件之前完成某些事情.这是为了允许首先初始化定制组件.

有没有办法确保在触发'window.onload'事件之前在外部javascript中进行初始化?

我之所以这样说的原因,就是尝试制作可重用的代码(构建一次 - 全部使用),外部脚本必须在主html/jsp/asp中的javascript之前检查它是否在'order/check'中/ php页面接管.而且我也不是在寻找JQuery @ _ @的解决方案

以下是stackoverflow.com上的一些链接我已经浏览了解决方案:
- Javascript - 如何检测文档是否已加载(IE 7/Firefox 3)
- 如何检查页面是否已完全加载(脚本和所有)?
- 页面完全加载时执行Javascript

有人可以帮助或指导我找到解决方案吗,你的帮助将是非常值得赞赏的,请 - 谢谢:D

此致,克雷格


[更新回复 - 2012年11月19日]

大家好,感谢您的建议和建议的解决方案,它们在搜索和测试可行解决方案时都非常有用.虽然我觉得我对自己的成绩并不是百分之百满意,但我知道你的建议和帮助让我更接近解决方案,并且可能确实在类似的情况下帮助其他人.

以下是我的想法:

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>
Run Code Online (Sandbox Code Playgroud)

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);
    }
}
Run Code Online (Sandbox Code Playgroud)

test_script_1.js

Loader.load(function(){initTestScript1();});

function initTestScript1() {
    document.getElementById("div_1").innerHTML = "Test Script 1 Initialized!";
}
Run Code Online (Sandbox Code Playgroud)

test_script_2.js

Loader.load(function(){initTestScript2();});

function initTestScript2() {
    document.getElementById("div_2").innerHTML = "Test Script 2 Initialized!";
}
Run Code Online (Sandbox Code Playgroud)

这将确保在调用window.onload事件处理程序之前调用脚本,同时确保首先呈现文档.

你们怎么看待这个可能的解决方案?

再次感谢大家的帮助和帮助:D

Eli*_*gem 16

基本上,你正在寻找这个:

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
};
Run Code Online (Sandbox Code Playgroud)

有关详细信息,请参阅MDN.

请记住,可能会在此处加载DOM,但这并不意味着已加载外部js文件,因此您可能无法访问该脚本中定义的所有函数/对象.如果要检查,则必须使用window.onload,以确保已加载所有外部资源.

因此,基本上,在您的外部脚本中,您将需要2个事件处理程序:一个用于readystatechange执行您需要在DOMready上完成的操作,以及一个window.onload,根据定义,它将在文档之后触发准备好了.(这会检查页面是否已满载).
您知道,在IE <9中window.onload会导致内存泄漏(因为DOM和JScript引擎是两个独立的实体,window对象永远不会完全卸载,并且侦听器不是GC).有一种方法可以解决这个问题,我已经在这里发布了,但它非常详细,但是你知道......