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 相关文章推荐
Prototype框架详解
Nov 25 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
vue实现简单瀑布流布局
May 28 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
dedecms系统常用术语汇总
2007/04/03 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
js压缩利器
2007/02/20 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
用Python编写web API的教程
2015/04/30 Python
发布你的Python模块详解
2016/09/15 Python
Python实现Kmeans聚类算法
2020/06/10 Python
django session完成状态保持的方法
2018/11/27 Python
python交换两个变量的值方法
2019/01/12 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
高三毕业寄语
2014/04/10 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
KVM基础命令详解
2022/04/30 Servers
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js