【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别
做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的。最近遇到了这样的问题,查询了多篇文章,做一下总结。
简单来说,要以用以下张表来表示 :jQuery的ready()与Javascrpit的load()
window.onload() | $(document).ready() | |
加载时机 |
必须等待网页全部加载完毕(包括图片等),然后再执行JS代码 |
只需要等待网页中的DOM结构加载完毕,就能执行JS代码 |
执行次数 |
只能执行一次,如果第二次,那么第一次的执行会被覆盖 |
可以执行多次,第N次都不会被上一次覆盖 |
举例 |
以下代码无法正确执行: window.onload = function() { alert(“text1”);}; window.onload = function() { alert(“text2”);}; 结果只输出第二个 |
以下代码正确执行: $(document).ready(function(){alert(“Hello”)}); 结果两次都输出 |
简写方案 | 无 | $(function () {}) |
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。
load()一般不建议使用,这里主要讲一下( $(selector).ready())。
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
参考:https://www.cnblogs.com/wsun/p/3916487.html
【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别的更多相关文章
- window.onload和JQuery中$(function(){})的区别即其实现原理
一.区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 在Jquery中$(function(){ })和$(document).ready(function(){ ...
- 全栈式JavaScript
如今,在创建一个Web应用的过程中,你需要做出许多架构方面的决策.当然,你会希望做的每一个决定都是正确的:你想要使用能够快速开发的技术,支持持续的迭代,最高的工作效率,迅速,健壮性强.你想要精益求精并 ...
- Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 win ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别
body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...
- Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
$().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...
- 老男孩Python全栈第2期+课件笔记【高清完整92天整套视频教程】
点击了解更多Python课程>>> 老男孩Python全栈第2期+课件笔记[高清完整92天整套视频教程] 课程目录 ├─day01-python 全栈开发-基础篇 │ 01 pyth ...
- python全栈开发目录
python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...
- Python全栈开发之目录
基础篇 Python全栈开发之1.输入输出与流程控制 Python全栈开发之2.运算符与基本数据结构 Python全栈开发之3.数据类型set补充.深浅拷贝与函数 Python全栈开发之4.内置函数. ...
随机推荐
- redis学习 (key)键,Python操作redis 键 (二)
# -*- coding: utf-8 -*- import redis #这个redis 连接不能用,请根据自己的需要修改 r =redis.Redis(host=") 1. delete ...
- Apigee 简介与简单试用
 Apigee (国内访问需要***)是一家成立于2004年的API管理公司,于2016年9月被Google收购,作为Google云的服务之一.Apigee提供从API设计.开发.管理.门户.网关等 ...
- Atitit 3种类型的公司:运营驱动型;产品驱动型; 技术驱动型。
Atitit 3种类型的公司:运营驱动型:产品驱动型: 技术驱动型. 领导驱动,产品驱动,运营驱动还是工程师驱动 3种类型的公司: 一种是运营驱动型: 一种是产品驱动型: 一种技术驱动型. 运营驱动 ...
- Protobuf3 序列化
在message_lite.h中定义了SerializeToString ,SerializeToArray ,SerializeToCodedStream ,SerializeToZeroCopyS ...
- 查看安装的react-native和react版本
转:http://blog.csdn.net/miss_ok/article/details/52777115 npm info React-native(目前是0.34.1) 知道最新版本后,通过以 ...
- Python类中的装饰器在当前类中的声明与调用
[本文出自天外归云的博客园] 我的Python环境:3.7 在Python类里声明一个装饰器,并在这个类里调用这个装饰器.代码如下: class Test(): xx = False def __in ...
- JVM:Java常见内存溢出异常分析
转载自:http://www.importnew.com/14604.html Java虚拟机规范规定JVM的内存分为了好几块,比如堆,栈,程序计数器,方法区等,而Hotspot jvm的实现中,将堆 ...
- 大数据架构:搭建CDH5.5.1分布式集群环境
yum install -y ntp gcc make lrzsz wget vim sysstat.x86_64 xinetd screen expect rsync bind-utils ioto ...
- stl综合
区别: List封装了链表,Vector封装了数组, list和vector得最主要的区别在于vector使用连续内存存储的,他支持[]运算符,而list是以链表形式实现的,不支持[]. Vector ...
- ubuntu下core file文件生成及调试
1.简介:corefile 是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 2.corefile的设置 默认情况下,程序崩溃是不会生成coref ...