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 - HTML的request类
Jul 15 Javascript
Prototype Function对象 学习
Jul 12 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 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中$_FILES的使用以及注意事项
2013/07/05 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
Shell如何接收变量输入
2016/08/06 面试题
应聘美工求职信
2013/11/07 职场文书
大学毕业感言50字
2014/02/07 职场文书
小学母亲节活动方案
2014/03/14 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
话题作文之诚信
2019/11/28 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python