浏览器加载模式:window.onload和$(document).ready()的区别(详解)
jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。
在延迟等待加载,JavaScript提供了一个事件为load,方法如下:
window.onload = function () {}; //JavaScript等待加载
$(document).ready(function () {}); //jQuery等待加载load和ready区别
window.onload |
$(document).ready() |
|
执行时机 |
必须等待网页全部加载完毕(包括 图片等),然后再执行JS代码 |
只需要等待网页中的DOM结构 加载完毕,就能执行JS代码 |
执行次数 |
只能执行一次,如果第二次,那么 第一次的执行会被覆盖 |
可以执行多次,第N次都不会被上 一次覆盖 |
简写方案 |
无 |
$(function () {}) |
在实际应用中,window.onload很少直接去使用,因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。遇到网速慢或者存在大的图片要下载时,页面已经全面展开,图片还在缓慢加载,这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。
浏览器加载模式:window.onload和$(document).ready()的区别(详解)的更多相关文章
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- window.onload与$(document).ready()的区别
对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...
- window.onload和document.ready的区别
window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...
- window.onload 与 $(document).ready() 的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...
- window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...
- 页面加载之window.onload=function(){} 和 $(function(){})的区别
通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...
- window.onload与$(document).ready()之区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...
- window.onload()和$(document).ready的区别( $(document).ready == $(function(){ }) )
首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...
- 【jQuery】window.onload 和 $(document).ready() 的区别
... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...
随机推荐
- DEVC++生成DLL的方法
通过网上一个MD5加密算法源码生成DLL 一.建立DLL项目并编译 DEVC++创建C项目,选择DLL, 一共4个文件及源码如下: dll.h dllmain.c md5.c md5.h 函数参数: ...
- windows系统下搭建Python开发环境
1.首先下载最新的Python http://www.python.org/download/,我下载的是最新的Python3.5.1 2.下载完成之后开始安装,安装就比较简单了,一路下一步. 3.安 ...
- spring的IOC,DI及案例详解
一:spring的基本特征 Spring是一个非常活跃的开源框架:它是一个基于Core来架构多层JavaEE系统的框架,它的主要目的是简化企业开发.Spring以一种非侵入式的方式来管理你的代码,Sp ...
- js获取当期日期累加天数
本文是转载的,,忘记出处了,我用上了,也给大家分享一下 一.日期减去天数等于第二个日期 function cc(dd,dadd)...{//可以加上错误处理var a = new Date(dd)a ...
- Android 创建自定义布局
我们所有的控件都是继承至View类的,而所有的布局都是继承至ViewGroup的,所以我们也可以继承某个view类来实现我们自己的布局或者控件. 引入布局 我们新建一个title.xml的layout ...
- cocos2d-x中的Box2D物理引擎
在Cocos2d-x中集成了2个物理引擎,一个是Chipmunk,一个是Box2D.前者是用C语言编写的,文档和例子相对较少:Box2D是用C++写的,并且有比较完善的文档和资料.所以在需要使用物理引 ...
- 正式学习React (六) 项目篇
https://github.com/huenchao/yingshili 或者点这里 注意事项看ReadME.md 会持续更新,反正就是把之前分析的redux react-redux都用一下,然后会 ...
- nginx请求体读取(二)
2,丢弃请求体 一个模块想要主动的丢弃客户端发过的请求体,可以调用nginx核心提供的ngx_http_discard_request_body()接口,主动丢弃的原因可能有很多种,如模块的业务逻辑压 ...
- ASP.NET MVC:多模板支持
原文 http://www.cnblogs.com/happyframework/p/3224278.html 背景 准备写个博客练习一下WEB编程,有一个需求就是多模板支持,类似博客园的自定义模板一 ...
- SQL Server 2008 对XML 数据类型操作
原文 http://www.cnblogs.com/qinjian123/p/3240702.html 一.前言 从 SQL Server 2005 开始,就增加了 xml 字段类型,也就是说可以直接 ...