window.onload 加载完毕的问题及解决方案(下)


Posted in Javascript onJuly 09, 2009

接上篇,其它方法:
一、在IE中还可以在onreadystatechange事件里进行判断
http://www.thefutureoftheweb.com/blog/adddomloadevent
这里有Jesse Skinner写了一段独立的脚本函数来解决各种浏览器的onload问题,。
http://img.3water.com/jslib/adddomloadevent.js

/* 
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig 
* Special thanks to Dan Webb's domready.js Prototype extension 
* and Simon Willison's addLoadEvent 
* 
* For more info, see: 
* http://www.thefutureoftheweb.com/blog/adddomloadevent 
* http://dean.edwards.name/weblog/2006/06/again/ 
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype 
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent 
* 
* 
* To use: call addDOMLoadEvent one or more times with functions, ie: 
* 
* function something() { 
* // do something 
* } 
* addDOMLoadEvent(something); 
* 
* addDOMLoadEvent(function() { 
* // do other stuff 
* }); 
* 
*/ addDOMLoadEvent = (function(){ 
// create event function stack 
var load_events = [], 
load_timer, 
script, 
done, 
exec, 
old_onload, 
init = function () { 
done = true; 
// kill the timer 
clearInterval(load_timer); 
// execute each function in the stack in the order they were added 
while (exec = load_events.shift()) 
exec(); 
if (script) script.onreadystatechange = ''; 
}; 
return function (func) { 
// if the init function was already ran, just run this function now and stop 
if (done) return func(); 
if (!load_events[0]) { 
// for Mozilla/Opera9 
if (document.addEventListener) 
document.addEventListener("DOMContentLoaded", init, false); 
// for Internet Explorer 
/*@cc_on @*/ 
/*@if (@_win32) 
document.write("<script id=__ie_onload defer src="//0" src="http://0"><\/scr"+"ipt>"); 
script = document.getElementById("__ie_onload"); 
script.onreadystatechange = function() { 
if (this.readyState == "complete") 
init(); // call the onload handler 
}; 
/*@end @*/ 
// for Safari 
if (/WebKit/i.test(navigator.userAgent)) { // sniff 
load_timer = setInterval(function() { 
if (/loaded|complete/.test(document.readyState)) 
init(); // call the onload handler 
}, 10); 
} 
// for other browsers set the window.onload, but also execute the old window.onload 
old_onload = window.onload; 
window.onload = function() { 
init(); 
if (old_onload) old_onload(); 
}; 
} 
load_events.push(func); 
} 
})();

二、另外还有在IE中的doScroll的,这是种方法只对IE有作用,而且它是一种hack方法。

在MSDN:About Element Behaviors 我们可以看到

When the ondocumentready event fires, the document has been completely parsed and built. Initialization code should be placed here if the component needs to navigate the primary document structure. The ondocumentready event notifies the component that the entire page is loaded, and it fires immediately before the onload event fires in the primary document. 
A few methods, such as doScroll, require the primary document to be completely loaded. If these methods are part of an initialization function, they should be handled when the ondocumentready event fires.

http://javascript.nwbox.com/IEContentLoaded/
/* 
* 
* IEContentLoaded.js 
* 
* Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l. 
* Summary: DOMContentLoaded emulation for IE browsers 
* Updated: 05/10/2007 
* License: GPL/CC 
* Version: TBD 
* 
*/ // @w    window reference 
// @fn    function reference 
function IEContentLoaded (w, fn) { 
    var d = w.document, done = false, 
    // only fire once 
    init = function () { 
        if (!done) { 
            done = true; 
            fn(); 
        } 
    }; 
    // polling for no errors 
    (function () { 
        try { 
            // throws errors until after ondocumentready 
            d.documentElement.doScroll('left'); 
        } catch (e) { 
            setTimeout(arguments.callee, 50); 
            return; 
        } 
        // no errors, fire 
        init(); 
    })(); 
    // trying to always fire before onload 
    d.onreadystatechange = function() { 
        if (d.readyState == 'complete') { 
            d.onreadystatechange = null; 
            init(); 
        } 
    }; 
}

在jQuery的源码中,针对Mozilla, Opera 和webkit用的是DOMContentLoaded,也就是上一篇中第一种;

而对IE用的是doScroll的方法。

Javascript 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 #Javascript
最简单的jQuery程序 入门者学习
Jul 09 #Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 #Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 #Javascript
JavaScript 继承的实现
Jul 09 #Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 #Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 #Javascript
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP实现图片压缩
2020/09/09 PHP
微信小程序 地图(map)实例详解
2016/11/16 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python yield 小结和实例
2014/04/25 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python中map的基本用法示例
2018/09/10 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
pymysql模块的操作实例
2019/12/17 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
linux面试题参考答案(5)
2016/11/05 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
活动邀请函范文
2014/01/19 职场文书
经理助理岗位职责
2014/03/05 职场文书
学校与家长安全责任书
2014/07/23 职场文书
会计人员岗位职责
2015/02/03 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python