$( 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事件.

浏览器兼容性

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

  document.addEventListener("DOMContentLoaded", function(event) {

    console.log("DOM fully loaded and parsed");

  });

</script>

随机推荐

  1. Windows 小技巧: 變更輸入法順序

    Windows XP 中還是有辦法變更輸入法順序的!!只不過,要動用到 Regedit.exe 這個程式. 執行 Regedit.exe至 HKEY_CURRENT_USER\Keyboard Lay ...

  2. MongoDB配置客户端

    新建mongodb27017.bat文件 内容为: mongo 127.0.0.1:27017/admin 连接成功! 来自为知笔记(Wiz)

  3. Java 循环语句之多重循环

    循环体中包含循环语句的结构称为多重循环.三种循环语句可以自身嵌套,也可以相互嵌套,最常见的就是二重循环.在二重循环中,外层循环每执行一次,内层循环要执行一圈. 如下所示: 例如:使用 * 打印长方形: ...

  4. python 传入参数返回的时候好像有些时候会出现莫名其妙的循环

    def handle_field(name, s_len, s): #some code #return s would error but return not.... #return s for ...

  5. 7、NFC技术：让Android自动运行程序

    用于描述NDEF格式数据的两个重要的类 NdefMessage:描述NDEF格式的信息 NdefRecord:描述NDEF信息的一个信息段  NdefMessage和NdefRecord是Androi ...

  6. LoadRunner参数数组

    参数数组提供了对一类参数集中存放的机制,其中LR内置的几个函数有:lr_paramarr_idx().lr_paramarr_len().lr_paramarr_random() 同时参数数组必须满足 ...

  7. VC++2010配置使用MySQL5.6

    0.前提 安装后的文件概览 编译器:  VC++2010 MySQL版本:MySQL5.6.19 for win64 Connector版本:connector  c++  1.1.3 在VS2010 ...

  8. [质疑]编程之美求N!的二进制最低位1的位置的问题

    引子:编程之美给出了求N!的二进制最低位1的位置的二种思路,但是呢?但是呢?不信你仔细听我道来. 1.编程之美一书给出的解决思路 问题的目标是N!的二进制表示中最低位1的位置.给定一个整数N,求N!二 ...

  9. no symbol version for module_layout

    内核模块编译helloworld: no symbol version for module_layout, 尝试各种解决办法, 都没搞定, 版本也是对的. dmesg提示no symbol vers ...

  10. stl 中List vector deque区别

    stl提供了三个最基本的容器:vector,list,deque.         vector和built-in数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此     它能非常好的支持随 ...