$( 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. ORACLE CONTROL FILE 笔记

    控制文件包含的信息:   1.数据库的名字   2.联机重做日志文件和数据文件的名字和位置   3.数据库创建的时间戳   4.当前日志的序列号   5.检查点信息   6.备份信息   TIP:数据 ...

  2. Shell 的source命令

    source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令. 注:该命令通常用命令“.”来替代. 如:source .bash_rc 与 . ...

  3. MySQL基础之第16章 数据备份与还原

    16.1.数据备份 16.1.1.使用 mysqldump 命令备份 mysqldump [OPTIONS] database [tables]mysqldump [OPTIONS] --databa ...

  4. [Everyday Mathematics]20150226

    设 $z\in\bbC$ 适合 $|z+1|>2$. 试证: $$\bex |z^3+1|>1. \eex$$

  5. Introduction 引言

    The risk of software failure has never been greater. The estimated annual economic impact ranges fro ...

  6. JSON 教程学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1. ______________ 知识点:1 ...

  7. ansible服务模块和组模块使用

    本篇文章主要是介绍ansible服务模块和组模块的使用. 主要模块为ansible service module和ansible group moudle,下面的内容均是通过实践得到,可以直接运行相关 ...

  8. LRU Cache的实现

      代码如下:     来自为知笔记(Wiz)

  9. LeetCode(4) － Median of Two Sorted Arrays

    题目要求很简单,就是给你两个已经排好序的数组nums1(长度为m)和nums2(长度为n),找出他们的中间值.返回值类型double是因为如果数字个数是偶数个,就要返回中间两个数的平均值.这题最简单的 ...

  10. Hadoop2.2.0 自动切换HA环境搭建

    自动切换的HA,比手动切换HA集群多了一个zookeeper集群 机器分配: zookeeper:hadoop4,hadoop5,hadoop6 namenode:hadoop4,hadoop5 da ...