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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
如何分别全角和半角以避免乱码
2006/10/09 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
深入浅析python定时杀进程
2016/06/06 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python获取Pandas列名的几种方法
2019/08/07 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python代码能做成软件吗
2020/07/24 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
在校生钳工实习自我鉴定
2013/09/19 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
高中校园广播稿
2014/10/21 职场文书
单位租房协议书范本
2014/12/04 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
CAD实训总结范文
2015/08/03 职场文书