开发者社区> y0umer> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

$(window).load(function() {})和$(document).ready(function(){})的区别

简介: 在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是: $(document).ready(function(){ .
+关注继续查看
在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

$(document).ready(function(){
...
});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的


元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就

需要用到:

$(window).load(function() {
$("#btn-upload").click(function(){   //比如说:
uploadPhotos();
});

首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.

不用body.Onload()理由1:

如果我们想同时加载多个函数,我们必须这样写

<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数

 $(window).load(function() {
            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代码

<script type="text/javascript">

(function() {
            alert("DOM还没加载哦!");
        })(jQuery)
  </script>

呵呵,有时候我们也有这个需求!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
document\.ready与window\.onload区别
document\.ready与window\.onload区别
0 0
C++11 function使用
function是一组函数对象包装类的模板,实现了一个泛型的回调机制。 引入头文件 #include using namespace std;using namespace std::placeholders;  //bind的时候会用` 参考:http://www.
797 0
window.load 和$(document).ready() 区别
  1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。2.编写个数不同 window.
602 0
$(window).load(function() {})和$(document).ready(function(){})的区别
JavaScript 中的以下代码 : Window.onload = function (){// 代码 }  等价于  Jquery 代码如下: $(window).load(function (){// 代码 });    $(function(){})等价于 $(document).
638 0
$(document).ready、body.Onload()和 $(window).load的区别
JavaScript文档加载完成事件  window.load(function(){...})和body.onload()都存在同样一个问题,那都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.$(document).ready()是文档结构已经加载完成(不包含图片等非文字媒体文件),不必等到所有的加载完毕。
865 0
js常见执行方法window.onload = function (){},$(document).ready()
1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发。2. $(document).ready();当web页面以及其附带的资源文件,如CSS,Scripts,图片等,加载完毕后执行此方法。
661 0
(function(){}})(); and (function(){}());的区别?
<div> (function(){})()这个语句,其实是首先用分组运算符评估了一个函数表达式,随后参与“函数调用”。而(function(){}())这个语句,则是用分组运算符评估了一个函数调用,随后由于语句的结束而被执行<br> 功能上2个是一样的 </div>
826 0
+关注
y0umer
高级网络安全技术员
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载