$( 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. 数据结构——Java实现单向链表

    结点类: /** * @author zhengbinMac * 一个OnelinkNode类的对象只表示链表中的一个结点,通过成员变量next的自引用方式实现线性表中各数据元素的逻辑关系. */ p ...

  2. mips-linux-gnu-gcc

    (1) -lz -lrt -lm -lc都是什么库 libzlibrtlibmlibc然后google之压缩库(Z)实时库(real time)数学库(math)标准C库(C lib) 可以进入/li ...

  3. JS 中document.URL 和 window.location.href 的区别

    实际上,document 和 window 这两个对象的区别已经包含了这个问题的答案. document 表示的是一个文档对象,window 表示一个窗口对象. 一个窗口下面可以有很多的documen ...

  4. TCP/UDP常见问题小结

    1,udp丢包 困扰几天的udp内网传输部分终于做通了,解决的关键就在于setsockopt的调用,设置接收缓冲. 遇到的问题是这样的,主机端发送udp数据包: 应用层的包大小为1452byte大小, ...

  5. USB鼠标过一段时间后失灵问题的修复

    现象: USB鼠标计算机锁屏一段时间后,不能动了,拔下来重新插上后,又恢复正常了. 原因: 这是系统默认USB电源管理造成的.一段时间不用后,自动关闭了USB电源. 解决方法: 1.进入设备管理器 在 ...

  6. netbeans中wicket插件对应的jQuery-ui版本

    在netbean里使用wicket,我们经常习惯使用netbeans自带的wicket插件直接安装wicket,但是因为netbean上的 wicket插件版本比较老,使得我们很多新的第三方wicke ...

  7. 传统IT大佬们，路在何方？

    [文/ 任英杰] 2014年第一季度季报陆续出台,互联网公司无疑仍是璀璨明星,一路凯歌,而与互联网企业的蒸蒸日上形成鲜明对照的是传统IT企业的集体黯然失色.分析一下传统IT大佬们发布的数据,用友营业收 ...

  8. Chapter11：关联容器

    当用decltype来获得一个函数指针类型时,必须加上一个*来指出我们要使用一个给定函数类型的指针.decltype<CompareIsbn>*. map<string, int&g ...

  9. 新手须知设计的法则 Mark

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律.且不痛不痒,都说要看点书.学点画.练软件.多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的? 学习是基于过往 ...

  10. httpd.conf 禁止运行PHP和html页面

    <VirtualHost *:80>    ServerName www.test.com    DocumentRoot /var/www/www.test.com    ErrorDo ...