$( 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. Android 混合开发 的一些心得。

    其实所谓这个混合开发,也就是hybird,就是一些简单的,html5和native 代码之间的交互.很多电商之类的app里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热 ...

  2. xxx

       <div style="position:absolute;left:0px;top:50px;width:1300px;height:550px;"><d ...

  3. ubuntu 查看系统版本信息

    查看cpu信息cat /proc/cpiinfo 查看ubuntu版本:cat /etc/issue 查看系统是32位还是64位方法1:#查看long的位数,返回32或64 getconf LONG_ ...

  4. JDK 1.6 下载 地址

    JDK1.6官方下载_JDK6官方下载地址: http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin ...

  5. hdu 2899(数学基础+二分)

    题意:给了你一个函数,然后给了你x的变化范围,让你求出函数的最小值. 分析:它让你求的是函数的最小值,所以我们可以先对函数求导,得到的导数就可以判断函数的单调性了,求出导数后,我们发现如果函数的导数是 ...

  6. Dyslexic Gollum

    题意: 求长度是n的二进制串中,不含长度大于等于k的回文串的个数 分析: dp[i][j][k]表示长度i,后11位状态是j不含长度大于等于k的回文串的个数(因为k最大是10,所把后11位状态压缩,d ...

  7. DuiLib消息处理剖析

    本来想自己写写duilib的消息机制来帮助duilib的新手朋友,不过今天发现已经有人写过了,而且写得很不错,把duilib的主干消息机制都说明了,我就直接转载过来了,原地址:http://blog. ...

  8. hive 面试题 转载

    转自:http://blog.csdn.net/ningguixin/article/details/12852051 有一张很大的表:TRLOG该表大概有2T左右TRLOG:CREATE TABLE ...

  9. Java 断点调试总结

    为了准备调试,你需要在代码中设置一个断点先,以便让调试器暂停执行允许你调试,否则,程序会从头执行到尾,你就没有机会调试了. 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头 ...

  10. 阿里巴巴2013年实习生笔试题B

    阿里巴巴集团2013实习生招聘技术类笔试题(B) 一.单向选择题 1.在常用的网络协议中,___B__是面向连接的.有重传功能的协议. A. IP B. TCP C. UDP D. DXP 2.500 ...