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

接上篇,其它方法:
一、在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的方法。

时间: 2024-09-02 21:22:15

window.onload 加载完毕的问题及解决方案(下)_javascript技巧的相关文章

window.onload 加载完毕的问题及解决方案(上)_javascript技巧

解决方法, 一.Mozilla 提供了一个非公开的(undocumented)函数: 复制代码 代码如下: // for Mozilla browsers if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } 二.对于 IE 浏览器,可以使用IE特有的 defer 属性: 复制代码 代码如下: <script defer type="t

判断在css加载完毕后执行后续代码示例_javascript技巧

最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js

js window.onload 加载多个函数和追加函数详解

 本篇文章主要是对js window.onload 加载多个函数和追加函数进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 平时做项目 经常需要使用window.onload,   用法如下:   function func(){alert("this is window onload event!");return;}    window.onload=func;   或者如下:    window.onload=function(){alert("this is

Dom加载让图片加载完再执行的脚本代码_javascript技巧

现在,我们来研究一下如何解决这个问题,解决方法就是在DOM加载完毕之后就执行程序.         先介绍两个人.一,jquery的作者:John Resig:二,javascript的世界级大师:dean edwards.(大家要记住这两位天才!)        jquery里有专门解决DOM加载的函数$(document).ready()(简写就是$(fn)),非常好用!John Resig在<Pro JavaScript Techniques>里,有这样一个方法处理DOM加载,原理就是通

使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src=&

基于JS判断iframe是否加载成功的方法(多种浏览器)_javascript技巧

推荐阅读: JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,

js window.onload 加载多个函数和追加函数详解_javascript技巧

平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: function t

js window.onload 加载多个函数的方法_javascript技巧

用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: 复制代码 代码如下: function t(){ alert("

预加载css或javascript的js代码_javascript技巧

预加载文件一般有两种常用的方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块),然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制,且如今网站的静态文件都是部署在cdn服务器上,如何预加载css js文件也变有点玄妙了. Stoyan Stefanov 撰文简明的阐