onload和ready的区别
document.ready和onload的区别为:加载程度不同、执行次数不同、执行速度不同。
1、加载程度不同

document.ready:是DOM结构绘制完毕后就执行,不必等到加载完毕。意思就是DOM树加载完毕就执行,不必等到页面中图片或其他外部文件都加载完毕。

onload:是页面所有元素都加载完毕,包括图片等所有元素。

2、执行次数不同

document.ready可以写多个.ready,可以执行多次,第N次都不会被上一次覆盖。

onload只能执行一次,如果有多个,那么第一次的执行会被覆盖。

3、执行速度不同

onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。

document.ready函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。

jQuery中onload与ready区别的更多相关文章

  1. jquery中的$(document).ready()使用小结

    本篇文章主要是对jquery中的$(document).ready()使用方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 window.onload = function(){ ...

  2. Jquery中$与$.fn的区别

    Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...

  3. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

      body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...

  4. jQUery中的$(document).ready()方法和window.onload()方法的区别

    1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...

  5. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

  6. 前端中onload与ready的区别

    Jquery的ready()与Javascrpit的load() 1 window.onload() $(document).ready() 加载时机 必须等待网页全部加载完毕(包括图片等),然后再执 ...

  7. jquery中的$(document).ready()

    window.onload = function(){ alert("welcome"); } 这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(d ...

  8. jquery中attr()与prop()区别

    我们知道jquery中获取元素属性有两种常见的方法,一个是attr()方法,这个是用的比较多的,也是我们第一个想到的.另外一个就是prop()方法了,这个方法之前很少用到,它是jquery1.6之后新 ...

  9. jquery中html(), text(),val()区别(zhuan)

    https://zhidao.baidu.com/question/307317838.html http://www.cnblogs.com/aqbyygyyga/archive/2011/11/0 ...

随机推荐

  1. 在PHP中操作文件的扩展属性

    在操作系统的文件中,还存在着一种我们可以自己定义的文件属性.这些属性不是保存在文件内容中,也不是直接可以通过 ls -al 所能看到的内容.它们可以将一个键值对信息永久得关联到文件上,一般现在的 Li ...

  2. Elasticsearch6.8.6版本 在head插件中 对数据的增删改操作

    一.访问ES方法:http://IP:PORT/ 一.创建索引:head插件创建索引的实例:在"索引"-"新建索引"中创建索引名称,默认了分片与副本情况: 直接 ...

  3. photoshop CS6打不开提示请卸载并重新安装该程序

    运行Photoshop.exe时,提示错误: 解决方案: 以管理员身份运行该exe文件

  4. Centos7下thinkphp5.0环境配置

    首先把yum源修改为阿里的yum源,如果没有安装wget,先安装一个.(如果有请蹦过) wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors ...

  5. python二级 之 第 五套

    1. 这里要注意输入的   就是列表 .                 [1,2,3] 2. 就是你要明白   random.seed()  产生随机种子# 与random.randint()  取 ...

  6. 解决 Delegate IDE build/run actions to Maven 编译两次的问题

    起因:我的电脑炸了,吸取教训,以后重要的东西千万不要存在C盘,特别是我们 IT 行业的,代码和文档都是一点一点积累的经验.突然没了,总感觉少了点啥,平时我的代码都是放在D盘,但是很多文档放在C盘,导致 ...

  7. == 和 equals区别

    == equals是两种字符串的方式 区别 == 是比较两个对象的引用地址值 equals是比较两个对象的具体内容 示例 package com.oop.demo06; public class De ...

  8. Vuex 基础

    其他章节请看: vue 快速入门 系列 Vuex 基础 Vuex 是 Vue.js 官方的状态管理器 在vue 的基础应用(上)一文中,我们已知道父子之间通信可以使用 props 和 $emit,而非 ...

  9. JavaScript04

    分离绑定事件 使用分离方式绑定元素事件可以使用页面元素与JavaScript代码完全分离,有利于代码分工和维护,是目前开发主流,分为两步: 1.获取需要绑定事件的元素 语法:根据id属性值取元素节点 ...

  10. Less-23 preg_replace1

    Less-23: 直接跳到Less-23的原因是,Less-(11~22)均为注入点不为get方式的注入.我先把get型注入写的差不多,再回来整理关于注入点的内容. 核心语句: 查询.报错均有回显. ...