$( document ).ready()&$(window).load()
$( document ).ready()
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.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$( document ).ready()</title> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function () { alert("document loaded"); });
//document ready 简写 $(function() { // ...代码... })
$(window).load(function () { alert("window loaded"); }); </script> </head> <body> <iframe src="http://techcrunch.com"></iframe> </body> </html>
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.
1
2
3
4
|
// Shorthand for $( document ).ready() $(function() { console.log( "ready!" ); }); |
You can also pass a named function to $( document ).ready()
instead of passing an anonymous function.
1
2
3
4
5
6
7
8
9
|
// 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
当页面中的文档树解析完成时,在页面的Document对象上,会触发DOMContentLoaded
事件.该事件代表了,页面的DOM树已经构建完成,但页面引用的样式表和图像文件,以及包含的框架页面可能还没有加载完成,在页面完全加载完成时,会触发另外一个类似的称为"load"的事件.
该事件会冒泡到当前页面的window
对象上.但框架页面中文档加载完成时并不会触发父页面的DOMContentLoaded事件.
浏览器兼容性