$( 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. 决定undo表空间的大小

    1.查询每秒最高需要的undo的数据块[每个块8k大小] sys)) from v$undostat; )) --------------------------------------------- ...

  2. JavaScript备忘录-逻辑运算符

    关于 || 和 && 运算符 var name=(document.getElementById('txtName') || '') && document.getEl ...

  3. MySQL与Oracle 差异比较之七其它

    其它 编号 类别 ORACLE MYSQL 注释 1 内连接的更改 1.select a.*, b.*, c.*, d.*  from a, b, c, d where a.id = b.id   a ...

  4. springmvc 入门级教程

    1.先看下目录结构 2.引用所需的jar文件 3.web.xml 配置如下 <?xml version="1.0" encoding="UTF-8"?&g ...

  5. Sde表结构分析

    原文 Sde表结构分析 今天开始想分析一下sde的表结构,希望能够弄明白sde一个要素类的每个Feature是如何存储的. 弄ArcSDE的人都知道,ArcSDE内一个要素类在关系数据库(以MS SQ ...

  6. LR之错误处理

    1.脚本的健壮性 2.VuGen的处理机制 3.lr_continue_on_error函数 4.示例代码

  7. JDBC项目实践

    这几天学习了JDBC的接口,从简单的连接,到不断地对JDBC的代码进行优化,最后到实体类,DAO类的设计,现在对这几天所学做一个总结: 首先是软件的系统组成: 数据库中有很多的表:Customer,D ...

  8. 浅谈“be practical and realistic”

    一 “实事求是”这个词,一般认为是古人的一种治学观念,后来经咏芝的发明.阐释.以及“应用”,成为“基本思想路线”(具体可参看大学思想政治教科书),被称为“活的灵魂”.这里不想过多地牵扯政治话题,仅就我 ...

  9. Window nginx+tomcat+https部署方案 支持ios9

    客户端和 Nginx 之间走的 HTTPS 通讯,而 Nginx 到 Tomcat 通过 proxy_pass 走的是普通 HTTP 连接. 下面是详细的配置(Nginx 端口 80/443,Tomc ...

  10. 原型模式--prototype

    C++设计模式——原型模式 什么是原型模式? 在GOF的<设计模式:可复用面向对象软件的基础>中是这样说的:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.这这个定义中,最 ...