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 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
杏林同学录(四)
2006/10/09 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
关于php中一些字符串总结
2016/05/05 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
利用node.js如何创建子进程详解
2017/12/09 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
Python实现手写一个类似django的web框架示例
2018/07/20 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python requests指定出口ip的例子
2019/07/25 Python
Python异常处理机制结构实例解析
2020/07/23 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
一套PHP的笔试题
2013/05/31 面试题
机械绘图员岗位职责
2013/11/19 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
先进党支部申报材料
2014/12/24 职场文书
采购员岗位职责
2015/02/03 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers