前端中onload与ready的区别
Jquery的ready()与Javascrpit的load()
| 1 | window.onload() | $(document).ready() |
| 加载时机 | 必须等待网页全部加载完毕(包括图片等),然后再执行JS代码 | 只需要等待网页中的DOM结构加载完毕,就能执行JS代码 |
| 执行次数 | 只能执行一次,如果第二次,那么第一次的执行会被覆盖 | 可以执行多次,第N次都不会被上一次覆盖 |
| 举例 |
以下代码无法正确执行: window.onload = function() { alert(“text1”);};
结果只输出第二个 |
结果只输出第二个 $(document).ready(function(){alert(“Hello”)});
结果两次都输出 |
| 简写方案 | 无 | $(function () {}) |
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。
https://www.cnblogs.com/wsun/p/3916487.html
前端中onload与ready的区别的更多相关文章
- jQuery中onload与ready区别
onload和ready的区别document.ready和onload的区别为:加载程度不同.执行次数不同.执行速度不同.1.加载程度不同 document.ready:是DOM结构绘制完毕后就执行 ...
- onload和ready的区别
onload和ready的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行 $(document).read()是DOM结构绘制完毕后就执行,不必等到加 ...
- js/jQuery中load()、onload()、ready()的区别
一.两大事件 load事件:指页面包含图片等文件在内的所有元素都加载完毕后执行的事件. ready事件:表示文档结构已加载完成(不包括图片等非文字媒体文件) 浏览器页面渲染的过程 - 寸寸君 - 博客 ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别
body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- 浏览器加载模式:window.onload和$(document).ready()的区别(详解)
jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...
- jquery中read与js中onload区别
在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它.这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺 ...
- window.onload 与 $(document).ready() 的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...
- 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
随机推荐
- Linux学习笔记 -- Shell 变量
定义变量 语法: 变量名=值 myVal= 需要注意一下变量明德规则: 首个字符必须为字母(a-z,A-Z). 中间不能有空格,可以使用下划线(_). 不能使用标点符号. 不能使用bash里的关键字( ...
- js获取用户实时地理位置
js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...
- 「小程序JAVA实战」微信开发者工具helloworld(三)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-03/ 第一个小程序demo的运行,首选需要去使用开发工具 开发工具下载安装 https://mp. ...
- Java微信公众平台开发(四)--回复消息的分类及实体的创建
转自:http://www.cuiyongzhi.com/post/42.html 前面有说道对接收到微信服务器消息后对消息的分类,当时主要分为普通消息和事件消息,这里我们要讲述的是我们在给用户回复的 ...
- ffmpeg个人翻译文档1-8<转>
[个人翻译]ffmpeg文档1 (2008-08-26 09:39:15) 转载 标签: 杂谈 分类: 翻译文档 指导1:制作屏幕录像 源代码:tutorial01.c 概要 电影文件有很多基本的 ...
- Money Systems 货币系统(母函数)
Description 母牛们不但创建了他们自己的政府而且选择了建立了自己的货币系统. [In their own rebellious way],,他们对货币的数值感到好奇. 传统地,一个货币系统是 ...
- Make Cents
Every year, an elephant qualifies to the Arab Collegiate Programming Competition. He graduated this ...
- Redis搭建(四):Sharding集群模式
一. 方案 1. 介绍redis集群分为服务端集群(Cluster)和客户端分片(Sharding)服务端集群:redis3.0以上版本实现,使用哈希槽,计算key的CRC16结果再模16834.此处 ...
- Physics Material
[Physics Material] 1. The Physics Material is used to adjust friction and bouncing effects of collid ...
- OpenGL顶点缓冲区对象
[OpenGL顶点缓冲区对象] 显示列表可以快速简单地优化立即模式(glBegin/glEnd)的代码.在最坏的情况下,显示列表的命令被预编译存到命令缓冲区中,然后发送给图形硬件.在最好的情况下,是编 ...