$( 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 Framework？

    Linus有一句名言广为人知:Read the fucking source code. 但其实,要深入理解某个软件.框架或者系统的工作原理,仅仅「看」代码是远远不够的.就拿Android Frame ...

  2. myeclipse9 struts2配置

    引用struts2所用到的jar web.xml配置如下 <?xml version="1.0" encoding="UTF-8"?> <we ...

  3. slowhttps安装及使用心得

    运行及安装环境,kali. 到googlecode上下载安装包,cd到安装目录./configure 运行完毕后输入make 结束后make install 简单点就直接apt-get install ...

  4. [转]SqlPlus安装配置

    本文转载自http://blog.csdn.net/wuxiaoyan_home/article/details/4826440 一.下载oracle 10g sqlplus软件 http://www ...

  5. CAT XQX ---- 增删改查架构说明 1

    View 层  --  以国家为例 1. 显示 数据库的 table 页面效果 对应代码: <table id="dg" title="国家信息" cla ...

  6. Python cookbook-读书笔记01

    1 数据结构和算法 1.1 Unpacking a sequence into separate variable(解包,赋值) >>> data = [ 'ACME', 50, 9 ...

  7. asp.net mvc让我告诉你请求从哪里来

    移动互联网的兴起,导致越来越多的网站开始看中自己的mobile站点(m站),例如我们用手机浏览器访问58,美团等网站都会看到适配的m站点,随之而来响应式布局,h5等技术随之兴起,对于一些大型网站来说, ...

  8. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  9. 使用HttpClient实现文件的上传下载

    1 HTTP HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源. 虽然在 JDK 的 java.net ...

  10. 使用gulp、yeoman、bower建站

    前端建站工具 标签 : 工具 *** 脚手架:yeoman 用途 快速搭建新项目 为项目增加新部分 创建模块或者包 引导新服务 ... 开始 安装yo和generator npm i -g yo np ...