//ready事件
$(document).ready(function(){
代码........
}); //ready事件简写:
$(function(){
代码........
}); //load事件
$(document).load(function(){
代码.......
});

结论:ready和load事件的先后执行顺序是:先ready后load

要理解上面的结论,先来看看DOM文档加载的步骤:

1、解析HTML结构

2、加载外部脚本代码和css样式表

3、解析并执行脚本代码

4、构造HTML DOM模型  //ready

5、加载图片等外部文件

6、页面加载完毕  //load

由此可见,ready事件是在load事件之前执行的。

结论:

load和ready的区别在于资源文件的加载,ready构建了基本的DOM结构,所以对于代码来说加载越快应该越好。

为了防止在图片资源过多的情况下,没有触发load事件页面就过期而造成的问题,我们不能等到所有资源文件加载之后再触发load事件。

jQuery学习一:jQuery中的ready和load事件的更多相关文章

  1. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  2. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  3. 原 jQuery中document的ready和load事件的区别?

    概述: 大家在工作中用jQuery的时候一定会在使用之前这样:   1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...

  4. jQuery 中ready与load事件

    jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...

  5. 锋利的JQuery学习之JQuery中的事件

    一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...

  6. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  7. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  9. jQuery学习之jQuery Ajax用法详解(转)

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

随机推荐

  1. hibernate-mapping的各种属性配置

    先给出一份常见的持久化类配置文件大概熟悉一下 <strong><spanstyle="font-size: 18px;"><hibernate-map ...

  2. Javascript Design Patterns - Js Class

    JavaScript is a class-less language, however classes can be simulated using functions. eg: // A car ...

  3. delphi 获取 TreeView选中的文件路径

      //获取 TreeView选中的文件路径 unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, G ...

  4. mahout算法源码分析之Itembased Collaborative Filtering(三)RowSimilarityJob验证

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 本篇分析上篇的分析是否正确,主要是编写上篇输出文件的读取以及添加log信息打印相关变量. 首先,编写下面 ...

  5. [AngularJS] Introduction to ui-router

    Introduce to basic $stateProvider.state() with $stateParams services. Understand how nested router w ...

  6. int *(*a[5])(int, char*)

    int* 表示是一个int型指针;(*a[5])(int, char*)中的a[5]表示是一个有5个元素的数组,而(*)(int, char*)则表示指向一个函数的指针,该函数有两个参数,第一个参数为 ...

  7. jquery.validate.js使用id验证控件

    jquery.validate.js默认的是元素的name. 例如:<input name="username" id="username" size=& ...

  8. SparkGraphXTest.scala

    /** * Created by root on 9/8/15. */ import org.apache.spark._ import org.apache.spark.graphx._ impor ...

  9. Python学习 之 编程

    1.搭建python环境 交互模式:输入python进入交互模式,exit()退出交互模式 文本模式:新建*.py文件,编辑*.py文件,运行python *.py 2.python文件类型 (1)源 ...

  10. 类型查找器 ITypeFinder

    NopCommerce为了支持插件功能,以及支持一些自动注册的功能.系统提供了类型查找器.ITypeFinder以及实现类就是提供此功能.通过类型查找器可以查找本程序域中的类,也可以查找整个bin目录 ...