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对元素拖动排序示例
Jan 16 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 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/05/02 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python制作最美应用的爬虫
2015/10/28 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python 实现try重新执行
2019/12/21 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
销售行政专员职责
2014/01/03 职场文书
小学庆六一活动方案
2014/02/28 职场文书
催款函范本大全
2015/06/24 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python