One of them, a really pesky one, is that JS functions assigned to the document.onload event will not start running until all binary content finished loading.
This causes the UI not to respond until all images are loaded.
I looked around for a solution for quite some time and finally i found one!
Dean Edwards - YOU DA BOMB!
I took the solution he created and packaged it into a function i could use whenever i need to defer my JS functions before binary content load, and here it is:
function loadScriptsBeforeImages(func){
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", func, false);
}
/*@cc_on @*/
/*@if (@_win32)
document.write("<\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
func(); // call the onload handler
}
};
/*@end @*/
if (/WebKit/i.test(navigator.userAgent)) {
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
func();
}
}, 10);
}
}
All you need to do is call loadScriptsBeforeImages(functionToExecute) and pass the function name you wish to defer as a parameter.
In this case, i'm calling an init function to attach methods to some DOM objects.
Notice the first two lines of the function which prevent the methods to run more than once.
function functionToExecute(){
if (arguments.callee.done) return;
arguments.callee.done = true;
method_1();
method_2();
method_3()
}
i hope this helps someone out there...
