[removed] 加载完毕的问题及解决方案（下）

接上篇，其它方法： 一、在IE中还可以在onreadystatechange事件里进行判断 http://www.thefutureoftheweb.com/blog/adddomloadevent 这里有Jesse Skinner写了一段独立的脚本函数来解决各种浏览器的onload问题，。 http://img.jb51.net/jslib/adddomloadevent.js 代码如下:/* * (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig * Special thanks to Dan Webb’s domre 【网页加载完成事件处理】 网页开发中，我们经常需要在页面完全加载后执行某些操作，例如设置DOM元素、初始化JavaScript库或执行动画等。这就涉及到了网页加载完成事件的监听和处理。`window.onload` 是JavaScript中最常见的一个事件，用于在浏览器加载完整个页面（包括所有图像、CSS和JavaScript文件）后触发指定的函数。 然而，不同浏览器对`window.onload` 的处理方式有所不同，导致在跨浏览器的环境中编写兼容性良好的代码成为挑战。在提到的上下文中，主要讨论了针对这个问题的解决方案。 1. **onreadystatechange 事件（IE 特有）** 在Internet Explorer浏览器中，`document.readyState` 属性可以用来检测DOM树的状态。当状态变为"complete"时，表示DOM已经加载完成，但可能还有图像等资源正在加载。因此，可以监听`document.onreadystatechange` 事件，当`readystate` 变为"complete"时执行代码。 ```javascript document.onreadystatechange = function() { if (document.readyState === "complete") { // DOM已加载，可以操作DOM元素 } }; ``` 2. **Jesse Skinner的addDOMLoadEvent函数** 提供的链接中，Jesse Skinner提供了一个兼容多种浏览器的`addDOMLoadEvent` 函数。这个函数的主要目的是确保在DOM准备就绪或者整个页面加载完成后，传入的函数能够按照添加顺序依次执行，而不会因为事件的触发顺序问题导致执行顺序混乱。 ```javascript addDOMLoadEvent = (function() { var load_events = [], load_timer, script, done, exec, old_onload; init = function() { done = true; clearInterval(load_timer); while (exec = load_events.shift()) exec(); if (script) script.onreadystatechange = ""; }; return function(func) { if (done) return func(); if (!load_events[0]) { // 处理各种浏览器的onload事件 // ... } }; })(); ``` 使用这个函数，你可以像这样添加多个加载事件处理程序： ```javascript function something() { // 当DOM准备好时执行的代码 } addDOMLoadEvent(something); addDOMLoadEvent(function() { // 更多的加载后执行代码 }); ``` 3. **其他浏览器的处理方式** - **Mozilla/Opera9**: 支持`DOMContentLoaded` 事件，当DOM树构建完成（不等待外部资源如图像）时触发。 ```javascript document.addEventListener("DOMContentLoaded", init, false); ``` - **Safari (WebKit):** 由于没有`DOMContentLoaded` 事件，可以使用定时器检查`document.readyState` 是否已变为"loaded"或"complete"。 ```javascript var load_timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { init(); clearInterval(load_timer); } }, 10); ``` 4. **IE的兼容性处理** 对于IE，还需要额外处理`<script>`标签的`onreadystatechange` 事件，特别是当使用`<script defer>`属性时。 ```javascript script = document.getElementById("__ie_onload"); script.onreadystatechange = function() { if (this.readyState == "complete") init(); // call the onload handler }; ``` 通过以上方式，开发者可以创建一个跨浏览器的解决方案，确保在页面加载完毕后正确执行所需的JavaScript代码。这在处理复杂的网页应用时尤为重要，因为它能保证所有的资源都已加载完毕，从而避免因资源未加载而导致的错误或意外行为。