摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html

为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序。

DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系。一般浏览器渲染操作的顺序大致按如下几个步骤来完成。
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。
(5) 加载图片等外部文件。
(6) 页面加载完毕。

具体说明如下。

1. 执行时机

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个页面中包含了大容量的多媒体文件,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。

开发人员习惯把页面初始化设置的脚本都放在load事件处理函数中,由于页面数据没有完全加载进来,导致网页文档呈现和脚本初始化配置不能够保持同步,从而影响了页面的可用性。

而jQuery的ready事件是在DOM结构绘制完毕之后就执行,也就是说它在外部文件加载之前就被执行了,这样就能够确保网页文档的呈现和脚本初始化设置保持同步。

总之,ready事件先于load事件被激活,如果网页文档中没有加载外部文件,则它们的响应时间基本上是相同的。

jQuery的ready与js的load事件的区别的更多相关文章

  1. jQuery $(document).ready()和JavaScript window.onload()事件的区别

    一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...

  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. doment ready事件和load事件的区别及实现

    从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document rea ...

  5. jquery $(document).ready() 与js原生的window.onload的区别总结

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  6. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  7. $(document).ready(function(){})和$(window).load(function(){})的区别

    页面加载完成有两种状态: 1.Ready:表示文档结构已经加载完成,不包含图片等非文字媒体文件,在Dom节点创建完成后执行,如果有多个定义则依次执行 $(document).ready(functio ...

  8. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

  9. jquery的$(document).ready()与js的window.onload区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

随机推荐

  1. bzoj 4817: [Sdoi2017]树点涂色【树链剖分+LCT】

    非常妙的一道题. 首先对于操作一"把点x到根节点的路径上所有的点染上一种没有用过的新颜色",长得是不是有点像LCT中的access操作?进而发现,如果把同一颜色的点连起来作为LCT ...

  2. docker学习教程

    我们的docker学习教程可以分为以下几个部分,分别是: 第一:docker基础学习 第二:docker日志管理 第三:docker监控管理 第四:docker三剑客之一:docker-machine ...

  3. 【洛谷3343_BZOJ3925】[ZJOI2015]地震后的幻想乡(状压 DP_期望)

    题目: 洛谷 3343 BZOJ 3925 分析: 谁给我说这是个期望概率神题的,明明没太大关系好吧 「提示」里那个结论哪天想起来再问 Jumpmelon 怎么证. 首先,由于开始修路前 \(e_i\ ...

  4. 【小程序】基于.NET CORE2.1 的 微信开放平台 第三方平台开发 教程一 准备工作

    微信第三方平台概述 公众平台第三方平台是为了让公众号或小程序运营者,在面向垂直行业需求时,可以一键授权给第三方平台(并且可以同时授权给多家第三方),通过第三方平台来完成业务,开放给所有通过开发者资质认 ...

  5. oracle如何实现函数、包、存储过程加密

    首先创建一个名称为test1.sql的文件: CREATE OR REPLACE FUNCTION get_date_string RETURN VARCHAR2 AS BEGIN RETURN TO ...

  6. 191 Number of 1 Bits 位1的个数

    编写一个函数,输入是一个无符号整数,返回的是它所有 位1 的个数(也被称为汉明重量).例如,32位整数 '11' 的二进制表示为 00000000000000000000000000001011,所以 ...

  7. hdu3436Queue-jumpers(线段树)

    链接 这题最不好求的一部分是rank部分 因为top每次都是把一个数放在队头 不会穿插在数组里 也就是说后面没有top过的一部分数 依旧保持有序 这样可以分为两部分来处理 比如 1 2 3 4 5 6 ...

  8. 简单工厂模式及php实现

    简单工厂模式(Simple Factory Pattern): 又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式.在简单工厂模式中,可以根据参数的不同返回不同类 ...

  9. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  10. 面试题6:输入一个链表,按链表值从尾到头的顺序返回一个ArrayList

    题目 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 思路 使用栈依次存放输入的链表顺序的值,然后依次出栈便是链表的逆序. 代码 import java.util.ArrayList ...