Detect if a Document Has Loaded with JavaScript

Discussion

1. Chris Z

   Between DOMContentLoaded/load and document.readyState, I think that there are a few ensure that something is executed once the document is loaded.

   HTMLDocument.prototype.ready = function () {
   	return new Promise(function(resolve, reject) {
   		if (document.readyState === 'complete') {
   			resolve(document);
   		} else {
   			document.addEventListener('DOMContentLoaded', function() {
   			resolve(document);
   		});
   					}
   	});
   }
   document.ready().then(...);
   
• David Walsh

  Nice, Chris!
• Chris Z

  Thanks. I think you may have posted something very similar to this before. Or am I just imagining that?
2. Rasmus Fløe

   window.onload = function () { alert("keep it oldschool!") };
   
3. DBJ

   I must be missing something obvious … why not just use jQuery?
• David Walsh

  You don’t use jQuery for a tiny code snippet…
• DBJ

  Re use is cultural fenomenon Unless this is some kind of deep JavaScript master class? Which I think it is not.
  We have solved and debated this issue in 2008 last time.
  As I like to reuse what is shareable, I might point to this (instead of re writing it all over again).
• DBJ

  No it was 2006 sorry … Very interesing page to read now.
  I suggest read it all, including comments, than come back here.
• Vlad

  Personally, I will prefer js and only include jQuery if there is a strong need and justification for that. But that’s me, you might prefer to use jQuery, but i don’t think there is a need to get pissed for using js instead of jquery
4. Kevin

   Alternately, I think you could use the ReadyStateChange Event.

   document.addEventListener('readystatechange', function docStateChange(e) {
       if(e.target.readystate === 'complete') {
           e.target.removeEventListener('readystatechange', docStateChange);
           done();
       }
   });
   
5. David Walsh

   A few people mentioning using an event listener. The problem is that I don’t know if the page is done loading; i.e. I can’t count on an event listener. Polling is the best way if I don’t know when my script is being injected.
• Matijs

  Could you clarify this a litte? Using polling here seems a bit crude in comparison to replacing it with listening for a readystatechange event.
• David Walsh

  If my test is triggered after the page is ready (remember, I can’t count on when it starts), readystatechange will have already triggered and my signal will never be triggered.
• Matijs

  But wouldn’t that be covered by your basic test already? So…only bind a listener in case the readyState isn’t complete yet?
• Brian

  Maybe a combination of the two would suit

  if(document.readyState !== 'complete'){
       // use Kevin's addEventListener('readystatechange', ....
  }
  
6. Zander Martineau

   This is the version that I am using at the moment, I don’t know if it applies to your test though..

   // This is needed to prevent onreadystatechange being run twice
   var ready = false;
   
   document.onreadystatechange = function() {
   
   	if (ready) {
   		return;
   	}
   	
   	// interactive = DOMContentLoaded & complete = window.load
   	if (document.readyState == 'interactive' || document.readyState == 'complete') {
   		ready = true;
   		
   		// init you code here
   	}
   };
   
7. peter

   How can i use this for a preloader?

   jQuery code is:

   $(window).load(function(){$('#preloader').fadeOut();});

   but i will use it without jQuery…
8. caue rego

   thanks! worked perfectly for my case where no events seem to work as well. just wanted a script for console or bookmark which would keep scrolling down on infinite scrollers. it surely still can be improved, but this was good enough for me for now:

   window.scrollTo(0,document.body.scrollHeight)
   if (interval) {
       clearInterval(interval)
       interval = null
   } else var interval = setInterval(function() {
       console.log(document.readyState)
       if(document.readyState === 'complete') {
           window.scrollTo(0,document.body.scrollHeight)
   /*        setTimeout(function() {
               if(document.readyState === 'complete') clearInterval(interval)
           }, 100)*/
       }    
   }, 200)
   
9. Jesse

   if (document.readyState === 'complete')

   Yep, that worked for me. Tough to find because there’s way more out there on the event ‘ready’ as opposed to the state ‘ready’.