Simple anwser when the DOM/Document Object Model Gets Loaded when the HTML Gets Loaded..
Docs
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
I also explained it well here to:
https://discuss.codecademy.com/t/window-onload-vs-document-ready/19000
Where i said:
jQuery document.ready will run your code when the HTML is all ready, but before images and other resources have finished. This is the earliest possible time that you can change the DOM with JavaScript, so it's widely used. In Modern Browsers like google chrome it is replaced by DOMContentLoaded3. Again more info Here.
So by your picture:
$document.ready(fn) will be loaded at the beggining of interactive face when the Dom has "completed" loading...
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…