https://learn.jquery.com/using-jquery-core/document-ready/

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

    
          $( document ).ready()

　　　　//document ready 简写　　　　$(function() {    　　　　// ...代码...　　　　})

$(window).load(function () { alert("window loaded"); });

Experienced developers sometimes use the shorthand $() for $( document ).ready(). If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.

                         
// Shorthand for $( document ).ready()
$(function() { 
 console.log( "ready!" );
});

You can also pass a named function to $( document ).ready() instead of passing an anonymous function.

// Passing a named function instead of an anonymous function.

function readyFn( jQuery ) {

// Code to run when the document is ready.

}

$( document ).ready( readyFn );

// or:

$( window ).load( readyFn );

DOMContentLoaded

https://developer.mozilla.org/zh-CN/docs/DOM/DOM_event_reference/DOMContentLoaded

当页面中的文档树解析完成时,在页面的对象上,会触发DOMContentLoaded事件.该事件代表了,页面的DOM树已经构建完成,但页面引用的样式表和图像文件,以及包含的框架页面,在页面完全加载完成时,会触发另外一个类似的称为"load"的事件.

该事件会到当前页面的对象上.但框架页面中文档加载完成时并不会触发父页面的DOMContentLoaded事件.

浏览器兼容性

Desktop

Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	0.2	1.0 (1.7 or earlier)	9.0	9.0	3.1