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 选中表格一列并对表格排序实现原理
Dec 15 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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
咖啡的传说和历史
2021/03/03 新手入门
php at(@)符号的用法简介
2009/07/11 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
js 页面输出值
2008/11/30 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vue加载完成后的回调函数方法
2018/09/07 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python实现telnet客户端的方法
2015/04/15 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
资金主管岗位职责范本
2014/03/04 职场文书
花坛标语大全
2014/06/30 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年消防工作总结
2014/11/21 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
关于nginx 实现jira反向代理的问题
2021/09/25 Servers