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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 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 ADODB使用方法集锦
2008/03/25 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php 图片上传类代码
2009/07/17 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
js特殊字符转义介绍
2013/11/05 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
求职信格式范本
2013/11/15 职场文书
成绩报告单家长评语
2014/12/30 职场文书
还款承诺书范本
2015/01/20 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书