$( 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. .CO域名快被这帮搞IT的玩坏了……

    鉴于近来国内访问Google的服务受阻,greatfire.org于前天推出了其基于亚马逊AWS的Google搜索镜像网站,地址是sinaapp.co.该网站随后因多家海外媒体的报道和众多微博大V的转 ...

  2. Struts2配置之Struts.properties

    Struts 2框架有两个核心配置文件,其中struts.xml文件主要负责管理应用中的Action映射,以及该Action包含的Result定义等.除此之 外,Struts 2框架还包含     s ...

  3. CentOS安装tomcat

    一.下载Tomcat 1..进入Tomcat官网:http://tomcat.apache.org/ 左侧选择相应的版本 点击Tomcat 6.0后 点击tar.gz下载apache-tomcat-6 ...

  4. size_type、size_t、differentce_type以及ptrdiff_t

      目录(?)[-] size_type size_t different_type ptrdiff_t size_t是unsigned类型,用于指明数组长度或下标,它必须是一个正数,std::siz ...

  5. 解决oracle11g的ORA-12505问题

    今天在使用SQL Developer的时候连不上去,报ORA-12505错误,但是SQLPLUS可以连接. 检查服务名,是OracleServiceORCL,那SID应当就是orcl,但是使用该SID ...

  6. git初步使用

    git初步使用 主要目的:使用代码控制工具,练习使用git 1.创建新项目 网址如下: https://github.com/kellyseeme?tab=repositories 注意每个人使用的名 ...

  7. LeetCode Database: Rank Scores

    Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...

  8. the hard thing about hard things 书摘

    1. from communist to VC 领导力是什么,书后面还举了乔布斯的例子,比如NEXT公司时期就是如此,是什么吸引了那些人在前景不明时还跟随乔布斯?   作者用自己与妻子的相遇说明,不要 ...

  9. kali install fcitx

    1 卸载fcitx相关软件包 如果系统安装了fcitx相关东西,需要卸载,因为源的fcitx版本太低．请谨慎,后果自负． apt-get purge fcitx-* 2 手动下载最新的fcitx软件包 ...

  10. Windows平台分布式架构-负载均衡(高并发)

    缘由 单纯想在winodows平台部署分布式程序,微软在IIS扩展的介绍中有涉及到Application Request Router + Web Farm + Url Rewriter可以实现分布式 ...