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 相关文章推荐
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP编程风格规范分享
2014/01/15 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
UDP协议功能
2013/01/06 面试题
学习新党章思想汇报
2014/01/09 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL