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文件缓存的代码
Apr 09 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python开发之文件操作用法实例
2015/11/13 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python将字母转化为数字实例方法
2019/10/04 Python
python 如何停止一个死循环的线程
2020/11/24 Python
联想英国官网:Lenovo英国
2019/07/17 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2015年技术员工作总结
2015/04/10 职场文书
整改通知书
2015/04/20 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书