Posted By

elightbo on 03/15/07


Tagged

DOM prototype unobtrusive


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

vanne
frankyfish
vali29
hans
drye
guo3823538
wirenaught


onDomReady


 / Published in: JavaScript
 

UPDATE: As noted below, document.observe("dom:loaded", functionName) was added to 1.6 which eliminates the need for this function.

Dan at Vivabit created the DOM Ready extension for the Prototype framework which allows you to start executing code when the DOM is ready and all elements are available, leaving the images and other element loading in the background. Very nice work and something i’ve been waiting for a long time!

  1. // Adapted from DOM Ready extension by Dan Webb
  2. // http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
  3. // which was based on work by Matthias Miller, Dean Edwards and John Resig
  4. //
  5. // Usage:
  6. //
  7. // Event.onReady(callbackFunction);
  8. Object.extend(Event, {
  9. _domReady : function() {
  10. if (arguments.callee.done) return;
  11. arguments.callee.done = true;
  12.  
  13. if (Event._timer) clearInterval(Event._timer);
  14.  
  15. Event._readyCallbacks.each(function(f) { f() });
  16. Event._readyCallbacks = null;
  17.  
  18. },
  19. onReady : function(f) {
  20. if (!this._readyCallbacks) {
  21. var domReady = this._domReady;
  22.  
  23. if (domReady.done) return f();
  24.  
  25. if (document.addEventListener)
  26. document.addEventListener("DOMContentLoaded", domReady, false);
  27.  
  28. /*@cc_on @*/
  29. /*@if (@_win32)
  30.   var dummy = location.protocol == "https:" ? "https://javascript:void(0)" : "javascript:void(0)";
  31.   document.write("<script id=__ie_onload defer src='" + dummy + "'><\/script>");
  32.   document.getElementById("__ie_onload").onreadystatechange = function() {
  33.   if (this.readyState == "complete") { domReady(); }
  34.   };
  35.   /*@end @*/
  36.  
  37. if (/WebKit/i.test(navigator.userAgent)) {
  38. this._timer = setInterval(function() {
  39. if (/loaded|complete/.test(document.readyState)) domReady();
  40. }, 10);
  41. }
  42.  
  43. Event.observe(window, 'load', domReady);
  44. Event._readyCallbacks = [];
  45. }
  46. Event._readyCallbacks.push(f);
  47. }
  48. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: kcmr on September 18, 2008

In version 1.6 we have: document.observe("dom:loaded", functionName)

http://www.prototypejs.org/api/document/observe

Posted By: elightbo on September 26, 2008

Thanks for the tip. I've been using the 1.6 version now...I wonder if I should just delete this snippet.

Posted By: liangliang on September 17, 2010

abercrombieandfitch.com Men Abercrombie Tees

[url=http://www.abercrombiefitchstyle.com/>[b]abercrombieandfitch.com[/b]][b]Men Abercrombie Tees[/b][/url] [url=http://www.abercrombiefitchstyle.com/>[b]Abercrombie[/b]][b]Mens Abercrombie Outerwears[/b][/url]

abercrombieandfitch.com Men Abercrombie Tees

You need to login to post a comment.