【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.内置函数. ...
随机推荐
- Effective Java 第三版——75. 在详细信息中包含失败捕获信息
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- 当使用 SelfHost 的 OWIN 承载 SignalR 时,重启 OWIN 后,SignalR 不能正常工作
需要在初始化时,重新对 Resolver 赋值一个新的实例: public class Startup { public void Configuration(IAppBuilder app) { v ...
- Atitti 创业团队vs打工的团队 attilax总结
Atitti 创业团队vs打工的团队 attilax总结 创业公司的性质与特点 热情,创新,效率 ,使命 为什么阿里员工很热情?因为他们大概都知道公司要做什么事情,也知道公司的使命.他们经常会跳出来 ...
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- 从零开始搭建FAQ引擎--深度语义匹配
从零开始搭建FAQ引擎--深度语义匹配
- Python threading 多参数传递方法
今天开启线程传递参数的时候,出现了一个小问题,一直不能传递多个参数,如下 import threading thread1 = threading.Thread(target=fun, args=[1 ...
- mybatis 映射器(mappers) 配置说明 加载映射文件方式
映射器(mappers) 既然 MyBatis 的行为已经由上述元素配置完了,我们现在就要定义 SQL 映射语句了.但是首先我们需要告诉 MyBatis 到哪里去找到这些语句. Java 在自动查找这 ...
- [原创]电路仿真设计multisim 14安装,破解,汉化教程
硬件工程师开发产品.利用multisim 等辅助软件进行设计仿真可以有效提高开发效率,减少设计弯路. 本文博乐就带大家一起进行multisim 14安装破解汉化. 首先下载multisim 14安装文 ...
- java jdk 打开出错 Failed to load the JNI shared library
``` Failed to load the JNI shared library 解决方法 换了JDK 32位x86的 打开32位 eclipse 2017 oxygen 出现这个问题,修改 配置文 ...
- 深入理解String类详解
1.Stringstr = "eee" 和String str = new String("eee")的区别 先看一小段代码, 1 public static ...