Jquery的ready()与Javascrpit的load()

1 window.onload() $(document).ready()
加载时机 必须等待网页全部加载完毕(包括图片等),然后再执行JS代码 只需要等待网页中的DOM结构加载完毕,就能执行JS代码
执行次数 只能执行一次,如果第二次,那么第一次的执行会被覆盖 可以执行多次,第N次都不会被上一次覆盖
举例

以下代码无法正确执行:

window.onload = function() { alert(“text1”);};
 
window.onload = function() { alert(“text2”);};

结果只输出第二个

结果只输出第二个

$(document).ready(function(){alert(“Hello”)});
 
$(document).ready(function(){alert(“Hello”)});

结果两次都输出

简写方案 $(function () {})

一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。

而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。

https://www.cnblogs.com/wsun/p/3916487.html

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

  1. jQuery中onload与ready区别

    onload和ready的区别document.ready和onload的区别为:加载程度不同.执行次数不同.执行速度不同.1.加载程度不同 document.ready:是DOM结构绘制完毕后就执行 ...

  2. onload和ready的区别

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

  3. js/jQuery中load()、onload()、ready()的区别

    一.两大事件 load事件:指页面包含图片等文件在内的所有元素都加载完毕后执行的事件. ready事件:表示文档结构已加载完成(不包括图片等非文字媒体文件) 浏览器页面渲染的过程 - 寸寸君 - 博客 ...

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

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

  5. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  6. 浏览器加载模式:window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  7. jquery中read与js中onload区别

    在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它.这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺 ...

  8. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  9. 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

    JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...

随机推荐

  1. Handler消息传送机制

    一.什么是UI线程 当程序第一次启动的时候,Android会同时启动一条主线程( Main Thread). 主要负责处理与UI相关的事件. 二.UI线程存在的问题 出于性能优化考虑,Android的 ...

  2. 浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统   网格系统的实现原理,是通过定义 ...

  3. CSS中盒子垂直居中的常用方法

    在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...

  4. as+bt=1是ab两数互质的充要条件

    [as+bt=1是ab两数互质的充要条件] 充分性,as+bt=1 => (a,b)=1: 因为as+bt=1,设c=(a,b),则c整除a和b,所以c整除as+bt,即c整除1,所以c=1,即 ...

  5. IDEA MAVEN 1.8无效的源发行版

    最近想将自己在IDEA上开发的MAVEN项目切换到JDK1.8版本上,结果IDEA报1.8无效的源发行版.下面说一下自己的解决方案: 1.pom文件 <build> <plugins ...

  6. git获取网上的项目

    这里是从coding.net上下载项目至本地phpstorm并配置好相关环境. 这里url地址正是项目路径.获取的地方是: 下面那个url直接复制粘贴. 自己选择一个目录,然后clone. 下面便是前 ...

  7. libevent源码深度剖析三

    libevent源码深度剖析三 ——libevent基本使用场景和事件流程 张亮 1 前言 学习源代码该从哪里入手?我觉得从程序的基本使用场景和代码的整体处理流程入手是个不错的方法,至少从个人的经验上 ...

  8. windows7 Sql server 2012 尝试读取或写入受保护的内存。这通常指示其他内存已损坏的修复

    项目中,使用了sql server2012数据库,服务端是2012,客户端如果是2008的话,就会报错: 索引错误. 没办法,就安装了sql server2012客户端.但是还是报错,无法连上数据库服 ...

  9. 【转】浏览器中F5和CTRL F5的行为区别

    原文地址:http://www.cnblogs.com/jiji262/p/3410518.html 前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为 ...

  10. BT下载的原理 和疑问

    我心中有几个疑问,同时也搜索了点素材,肯能对理解问题有帮助. BT下载,即P2P下载,是一种不需要中心化服务器的下载,实现原理是,每个客户端在下载的时候也作为服务器. 我的疑问是,P2P各个节点是如何 ...