浏览器加载模式: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 ...
随机推荐
- Winform获取应用程序的当前路径的方法集合(转)
Winform获取应用程序的当前路径的方法集合,具体如下,值得收藏 //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Loc ...
- 在world中批量调整图片的大小
1.Alt+F8调出vb宏 创建一个宏名字,setsize 粘贴代码后保存关闭. Sub setsize() ' ' setsize 宏 ' ' Dim iSha As InlineShape Fo ...
- Mysql优化之创建高性能索引(一)
1.索引基础 索引对于良好的性能非常关键.尤其是当表中的数据量越来越大时,索引对性能的影响愈发重要.但是不恰当的索引随着数据量的增加,也会使整个数据库的性能下降. 举个例子: ; 如果在id上建立索引 ...
- Berkeley DB基础教程
一.Berkeley DB的介绍 (1)Berkeley DB是一个嵌入式数据库,它适合于管理海量的.简单的数据.如Google使用其来保存账户信息,Heritrix用其来保存froniter. (2 ...
- HTML5图形绘制学习(1)-- Canvas 元素简介
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...
- LINQ to Entities 不识别方法的解决方案
//这样不行 var BrushProducTimeout = aliexpressEntities.CP_BrushProduc.Where(p => p.isActive == true ...
- Wcf实现IServiceBehavior拓展机制
IServiceBehavior接口 描述:提供一种在整个服务内修改或插入自定义拓展机制: 命名空间: System.ServiceModel.Description程序集: System.Ser ...
- Xcode7 使用NSURLSession发送HTTP请求报错
http://blog.csdn.net/chenyong05314/article/details/46721205
- 找出诡异的Bug:数据怎么存不进去
带着学生做课程设计.程序一大,课程中做过了小项目,练过了分解动作,一到合起来了,难免还是要乱了分寸.事实上,实战的功夫,就是这样出来的.(课程设计指导视频链接(第36课时,3.18 银行系统开发).课 ...
- Open Replicator
Open Replicator ( http://code.google.com/p/open-replicator/ ) 开源了.Open Replicator是一个用Java编写的MySQL bi ...