4

Is it possible to determine if a page is loading any resources, at any time including after the HTML document loads or from new ajax requests?

The use case is I have a site where I need to take a screenshot, but want to wait until everything has rendered. So this means:

  1. DOM has fully loaded (detecting this is easy even with plain JS)
  2. All resources (css, js, etc) have loaded.
  3. Any AJAX calls that may have occurred from actions have completed. (probably the hard part here)

Detecting animations and CSS transitions is difficult, and not necessary for this. If you have a solution that covers 1-3, I will accept it. If you also know how to detect CSS transitions and JS animations etc, then you're amazing and I'll accept that :)

Don P
  • 60,113
  • 114
  • 300
  • 432
  • you can monitor some things like ajax, jsonp,images, audio, video, and some iframes, but background-images, off-screen content, and fonts are difficult or impossible to observe with JS. you would be best to monitor as many items as possible, each event re-scheduling a 5-second delay that eventually fires your screenshot utility. – dandavis Jun 01 '14 at 22:02
  • Possible duplicate of this : http://stackoverflow.com/questions/3262473/check-pending-ajax-requests-or-http-get-post-request but may also hold your answer – Patrick Jun 01 '14 at 22:02
  • If you can provide some clarification, we can provide a precise answer. – PeterKA Jun 01 '14 at 22:05
  • "but want to wait until everything has rendered." - Well, your problem there is the use of animations or stuff triggered by timers, etc. I don't believe you can truly know if a web page has "finished", as it could be a page with multiple animations. – Lee Taylor Jun 01 '14 at 22:35
  • @user3558931 - what clarification would you like? :P – Don P Jun 01 '14 at 23:23
  • Like what kind of resources do you have on your page? – PeterKA Jun 01 '14 at 23:44
  • Assume any kind. Images, js, css, etc. – Don P Jun 14 '14 at 07:54

1 Answers1

2

I think that to answer this question we should move from different sides.

First of all you want to wrap all your javascript code with

$( window ).load(function() {
  // Run code
});

This will force your function to fire just when the page is fully loaded, including graphics, load method.

Quoted from jquery website

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

This approach will solve point 1 and 2, and its a little bit different from ready method that fires just when the DOM is loaded.

The point 3 is a little bit harder to approach, but you could solve it using 

$( document ).ajaxStop(function() {
  //run code here
});

As it register an handler to be called when all Ajax requests have completed - ajaxStop.

Quoted from jquery website

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

So the final code will look like this:

$( window ).load(function() {
      $( document ).ajaxStop(function() {
           //run code here
       });
});

Hope it helped!

Ivan
  • 408
  • 4
  • 14