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作用域与变量提升
Dec 09 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
js实现开启密码大写提示
Dec 21 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 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开发中的安全防范知识详解
2013/06/06 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python-基础-入门 简介
2014/08/09 Python
python文件写入实例分析
2015/04/08 Python
在Python中使用成员运算符的示例
2015/05/13 Python
windows下python连接oracle数据库
2017/06/07 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
运动会致辞稿50字
2014/02/04 职场文书
村级换届选举方案
2014/05/10 职场文书
升职自荐信范文
2015/03/27 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android