יום ראשון, 30 במרץ 2008

running scripts before binary content load

I just finished banging my head against some problems in the delver application.

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...

3 תגובות:

  1. isn't it the same trick they use in jquery's $(document).ready ?

    השבמחק
  2. בדיוק מה רציתי לאמור..נראה לי jQuery פתרו את זה בצורה יותר נוחה, לא ככה?

    השבמחק
  3. אכן, אם כי את הפוסט הזה כתבתי לפני שנה וחצי כשעוד עבדתי עם prototype.js שבה לצערי אין את המתודה הזו.

    השבמחק