clarification on when does ajax call within document.ready gets triggered

Question

If I've a page which contains below:

1. HTML with text and images.
2. Lots of reference to CSS and Large JS Files.
3. Within HTML a call similar to one below:

$(document).ready(function () {
     $.ajax({
      url: "http://fiddle.jshell.net/favicon.png",
      beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
      }
    })
      .done(function( data ) {
        if ( console && console.log ) {
          console.log( "Sample of data:", data.slice( 0, 100 ) );
        }
      });
      }

Could someone please clarify if my understanding below is correct, in terms of which one gets loaded first?

1. Load all HTML and Images.
2. Load CSS and apply CSS Styles
3. Then, invoke $.ajax call.
4. Render whole page.

Answer 1

ready is guaranteed to be invoked after the DOM is ready, nothing more. This definitely will not have loaded "all HTML and images", specifically images may or may not have been loaded.