In my last post, I mentioned a way to resolve fire javascript function after layout (the dom) is ready but before images were downloaded. I mean, "sometimes it is too late to use window.onload to fire js".

But the solution is sometime incorrectly using for resolve the problem.
In case of document.readyState is "interactive", the page must be refreshed. So if you newly navigated to a page, the readtState never be "interactive".
And after a deeply test of "complete" status, it has some behavior as window.onload.

Dean has a solution, it is smart and cross-browser(IE,Mozilla,Opera,Safari).
http://dean.edwards.name/weblog/2005/02/order-of-events/
I Traced the post above, read all the comments and finally got a perfect solution:


// Dean Edwards/Matthias Miller/John Resig

function init() {
// quit if this function has already been called
if (arguments.callee.done) return;

// flag this function so we don't do the same thing twice
arguments.callee.done = true;

// kill the timer
if (_timer) clearInterval(_timer);

// do stuff
};

/* 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=javascript:void(0)><\/script>");
var 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
var _timer = setInterval(function() {
if (/loadedcomplete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;

Labels: coding, javascript