Detect if page has finished loading

Question

Is there a way to detect when a page has finished loading ie all its content  javascript and assets like css and images   so like   if PAGE HAS FINISHED LOADING       do something amazing     and also additionally if the page has been loading for more than 1 min then do something else such as   if PAGE HAS BEEN LOADING FOR 1 MIN       do something else amazing     I ve seen websites like Apple s MobileMe do similar checks but haven t been able to figure it out in their huge code libraries   Can anyone help   Thanks  EDIT  This is essentially what I want to do      hide content     hide   hide        hide loading     loading   hide        fade in loading animation setTimeout     loading   fadeIn    200    jQuery window  load function           hide   fadeIn           loading   fadeOut function           this  remove        clearInterval loadingAnim            setTimeout function             error   fadeIn         60000

User · Answer

there are two ways to do this in jquery depending what you are looking for    using jquery you can do     this will wait for the text assets to be loaded before calling this  the dom   css   js      document  ready function             this will wait for all the images and text assets to finish loading before executing    window  load function

User · Answer

Without jquery or anything like that beacuse why not    var loaded 0  var loaded1min 0  document addEventListener  DOMContentLoaded   function event       loaded 1      setTimeout function            loaded1min 1         60000

User · Answer

Is this what you had in mind       document   ready  function            do your stuff

User · Answer

jQuery window  load function          alert  page is loaded         setTimeout function              alert  page is loaded and 1 minute has passed              60000          Or http   jsfiddle net tangibleJ fLLrs 1   See also http   api jquery com load-event  for an explanation on the jQuery window  load   Update  A detailed explanation on how javascript loading works and the two events DOMContentLoaded and OnLoad can be found on this page   DOMContentLoaded  When the DOM is ready to be manipulated  jQuery s way of capturing this event is with jQuery document  ready function           OnLoad  When the DOM is ready and all assets - this includes images  iframe  fonts  etc - have been loaded and the spinning wheel   hour class disappear  jQuery s way of capturing this event is the above mentioned jQuery window  load

User · Answer

One option is to have the page be blank  containing a small amount of javascript  Use the script to make an AJAX call to get the actual page content  and have the success function write the result over the current document  In the timeout function you can  do something else amazing   Approximate pseudocode     document  ready function          ajax       url of actual page       success do something amazing       timeout  do something else

User · Answer

I think the easiest way would be  var items      img  style         itemslen   items length   items bind  load   function         itemslen--      if   itemlen     Do stuff here       EDIT  to be a little crazy   var items      a  abbr  acronym  address  applet  area  audio  b  base            basefont  bdo  bgsound  big  body  blockquote  br  button  canvas            caption  center  cite  code  col  colgroup  comment  custom  dd  del           dfn  dir  div  dl  document  dt  em  embed  fieldset  font  form  frame           frameset  head  hn  hr  html  i  iframe  img  input  ins  isindex  kbd           label  legend  li  link  listing  map  marquee  media  menu  meta           nextid  nobr  noframes  noscript  object  ol  optgroup  option  p           param  plaintext  pre  q  rt  ruby  s  samp  script  select  small            source  span  strike  strong  style  sub  sup  table  tbody  td            textarea  tfoot  th  thead  title  tr  tt  u  ul  var  wbr  video            window  xmp    itemslen   items length   items bind  load   function         itemslen--      if   itemlen     Do stuff here

User · Answer

var pageLoaded 0     document  ready function       pageLoaded 1        Using jquery  https   learn jquery com using-jquery-core document-ready

User · Answer

FYI of people that have asked in the comments  this is what I actually used in projects   function onLoad loading  loaded        if document readyState      complete            return loaded              loading        if  window addEventListener            window addEventListener  load   loaded  false             else if  window attachEvent            window attachEvent  onload   loaded             onLoad function       console log  I am waiting for the page to be loaded       function        console log  The page is loaded

User · Answer

That s called onload  DOM ready was actually created for the exact reason that onload waited on images    Answer taken from Matchu on a simmilar question a while ago     window onload   function      alert  It s loaded        onload waits for all resources that are part of the document   Link to a question where he explained it all   Click me  you know you want to

User · Answer

Another option you can check the document readyState like   var chkReadyState   setInterval function         if  document readyState     complete                clear the interval         clearInterval chkReadyState              finally your page is loaded           100     From the documentation of readyState Page the summary of complete state is     Returns  loading  while the document is loading   interactive  once it   is finished parsing but still loading sub-resources  and  complete    once it has loaded

[jquery] Detect if page has finished loading

Examples related to jquery