jquery $(document).ready() 与window.onload的区别(转)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:
$(document).ready(function(){
...
});
这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就需要用到:
代码如下:
$("#btn-upload").click(function(){ //比如说:
uploadPhotos();
});
});
下面是转载的内容,
用$(window).load(function(){...})而不用body.onload()的几个理由
首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.
不用body.Onload()理由1:
如果我们想同时加载多个函数,我们必须这样写
<body οnlοad="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数
alert("hello,我是jQuery!");
});
$(window).load(function() {
alert("hello,我也是jQuery");
});
这样写它会从上往下执行这两个函数,并且看起来漂亮多了.
不用body.Onload()理由2:
用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.
另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){}),因为他会在页面的dom元素加载完毕后就执行,而无需等到图片或其他媒体下载完毕.
但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是该使用$(function(){})往往需要结合具体需要而作不同的选择.
最后附上一段在所有DOM元素加载之前执行的jQuery代码
代码如下:
(function() {
alert("DOM还没加载哦!");
})(jQuery)
</script>
呵呵,有时候我们也有这个需求!
转载于:https://www.cnblogs.com/SzBlog/p/5390487.html
jquery $(document).ready() 与window.onload的区别(转)相关推荐
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- jQuery中$(document).ready()和window.onload的区别
$(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onlo ...
- $(document).ready() 和 window.onload 的区别
参考资料: http://blog.csdn.net/lcc921528642/article/details/48379431 http://www.cnblogs.com/jiajia123/p/ ...
- $(document).ready() 与 window.onload 的区别
$ (document).ready() 和 window.onload 在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的执行上 $ (document) ready() 和 wind ...
- 谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...
- $(document).ready()和window.onload的区别
来源于: The window.onload event fires when a document is completely downloaded to the browser. This mea ...
- jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 > ...
- $(document).ready()与window.onload的区别
1.执行时间: window.onload要等到页面所有元素加载完毕才执行,包括(图片.flash等) $(document).ready()在DOM结构绘制完毕后就执行,不必等到加载完毕. 2.执行 ...
- document.ready和window.onload的区别
functionjquery文档浏览器脚本css 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件), 二是onload,指示页面包含图片等文件在内的所有元 ...
- jquery $(document).ready()与window.onload的区别
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
最新文章
- 生物界地震,AlphaFold破解50年重大挑战,AI+X将迎来新时代
- 编程之美 2.4 1的数目
- windows+sublime text3+MINGW编译运行c
- NetBeans IDE 7.0 Beta 发布
- roslyn分析字符串代码_.NET 5 源代码生成器——MediatR——CQRS
- Python库:Python OS库
- Xpath路径表达式
- 理解JPA注解@GeneratedValue
- Android 获取经纬度处理
- 【运维】linux shell 编程之函数使用
- 傅立叶级数到傅立叶变换推导与理解
- 长尾效应--Long Tail Effect
- linux所有目录和子目录和文件777,关于linux:Chmod 777到一个文件夹和所有内容
- 有关Cidaemon.exe服务占用大量CPU资源的解决办法
- c# wifi串口通信_在C#中实现串口通信的方法
- Android 登录3D翻转动画效果
- (转)FLASH技术分享
- python地铁车票_Python分析3034个地铁站,发现中国地铁名字的秘密。
- 【遍历csv文件按年份统计各列个数并批量输出】
- 计算机图像学基础课程设计,计算机图形学课程设计
热门文章
- 全网最全的 JavaScript 数组各个方法用途的思维导图
- php实现并排,css实现多列并排 多块并排 左右顶头_html/css_WEB-ITnose
- uni-app 中通过 async + await + Promise 实现 request 请求同步化
- git 基于master分支 创建其他本地分支,并关联
- 对自己编译的文件(exe/dll)进行签名的实践(Windows)
- 2021-3测试通过:eclipse安装svn插件
- 全网首发:彻底搞清楚了下划线的规则
- 现在连U盘都不兼容性了?
- 华为的CPU怎样才能卖掉
- 错误一例:expected expression before } token