window.onload 加载完毕的问题及解决方案(下)

所属分类: 网络编程 / JavaScript 阅读数: 1251
收藏 0 赞 0 分享

接上篇,其它方法:
一、在IE中还可以在onreadystatechange事件里进行判断
http://www.thefutureoftheweb.com/blog/adddomloadevent
这里有Jesse Skinner写了一段独立的脚本函数来解决各种浏览器的onload问题,。
http://img.jb51.net/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的方法。

更多精彩内容其他人还在看

JSONP原理及简单实现

这篇文章主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

浅析JSONP技术原理及实现

这篇文章主要介绍了浅析JSONP技术原理及实现 的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

使用Web Uploader实现多文件上传

这篇文章主要介绍了使用Web Uploader实现多文件上传的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

json的使用小结

下面小编就为大家带来一篇json的使用小结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

非常实用的js验证框架实现源码 附原理方法

这篇文章主要为大家详细介绍了一个非常实用的js验证框架实现源码,并附原理方法,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

js验证框架之RealyEasy验证详解

这篇文章主要为大家详细介绍了js验证框架之RealyEasy验证,记录了RealyEasy验证的使用步骤,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

webpack中引用jquery的简单实现

下面小编就为大家带来一篇webpack中引用jquery的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript必知必会(五) eval 的使用

这篇文章主要介绍了JavaScript必知必会(五) eval 的使用 的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript必知必会(六) delete in instanceof

这篇文章主要介绍了JavaScript必知必会(六) delete in instanceof的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript必知必会(七)js对象继承

这篇文章主要介绍了JavaScript必知必会(七)js对象继承的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多