js 中文档加载完成的两种事件 ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件） onload，表示页面包含图片等非文字媒体文件在内的所有元素都加载完成。 一般情况先一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。　　 ## **$(document).ready(function(){ }) 等同于 $(function($) { } )** 或者 **$().ready(function(){ })：**     jQuery的默认参数是document       在同一个页面可以同时存在多个`.ready` 方法     $(document).ready 里的代码是在页面内容都加载完才执行的，如果直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，如果标签里执行的代码调用了当前还没加载过来的代码或者dom，      那么就会报错（script标签下面还有其他元素等）。但是如果把script标签当到页面最后面那么就没问题，可以达到和ready差不多的效果 页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成(比如 图片不一定已经加载完成)      **DOMContentLoaded**   **DOM树构建完成时触发事件**(IE没有此事件)不再举例(javascript写法) $(document).ready(function(){ }) |$(function($) { } ) 的javscript写法 ``` var callback = function(){ // 在 DOM 完全加载完后执 console.log(document.getElementById("sheng")) }; if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) { callback(); } else { document.addEventListener("DOMContentLoaded", callback); } // 兼容IE8及以下 document.attachEvent("onreadystatechange", function(){ // 检测 DOM 是否加载完全 if(document.readyState === "complete"){ // 为了确保在之后不会再触发移除事件监听 document.detachEvent("onreadystatechange", arguments.callee); // 实际处理程序... } }); ``` ## **window.onload  : ( javascript写法)**     是在页面所有的元素都加载完成后才触发(包括页面上的资源 比如 必须得等到全部的图片都加载完成后才能触发)     window.onload不能同时编写多个（即在一个页面只能写一个这个window.onload方法），如果有多个window.onload方法，只会执行一个  ## **$(document).load(function(){ })：  注意此方法在高版本已经废弃请用**`$(window).on('load', function(){ ...});代替`     指示页面包含图片等文件在内的所有元素都加载完成。  所以我们要点击图片触发事件等就需要用到lond方法    **load方法是在onload事件中绑定一个处理函数，如果这个处理函数绑定给window对象则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发** $(window).load(function (){         // 编写代码  高版本已经废弃  }); 等价于 JavaScript 中的以下代码  Window.onload = function (){       // 编写代码  } if(typeof jQuery !='undefined'){ alert("jQuery library is loaded!"); }else{ alert("jQuery library is not found!"); } 页面结构被加载完毕后执行$(document).ready(function(){ … });简写$(function($) { ... }); 当页面加载完毕后执行里面的函数$(function(){ … })