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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
node打造微信个人号机器人的方法示例
Apr 26 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
微信小程序使用前置摄像头拍照
Oct 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执行速率优化技巧小结
2008/03/15 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
python 创建弹出式菜单的实现代码
2017/07/11 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Python pymongo模块用法示例
2018/03/31 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
区域销售主管岗位职责
2014/06/15 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
幽灵公主观后感
2015/06/09 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
导游词之西安骊山
2019/12/03 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题