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

js中的window.onload和jquery中的load区别的讲解

简介: JavaScript 中的以下代码  [javascript] view plaincopyprint? Window.onload = function (){      // 编写代码 }   Window.onload = function (){ // 编写代码 }  等价于   Jquery 代码如下: 
+关注继续查看
JavaScript 中的以下代码 

[javascript] view plaincopyprint?
  1. Window.onload = function (){      // 编写代码 }  
Window.onload = function (){ // 编写代码 } 

等价于  

Jquery 代码如下: 

[javascript] view plaincopyprint?
  1. $(window).load(function (){        // 编写代码  });  
$(window).load(function (){ // 编写代码 }); 

 
window.load
$(document).ready()
执行时机
必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行
网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完
编写个数
不能同时编写多个
以下代码无法正确执行:
window.onload = function(){
   alert(“text1”);
};
window.onload = function(){
   alert(“text2”);
};
结果只输出第二个
能同时编写多个
以下代码正确执行:
$(document).ready(function(){
   alert(“Hello World”);
});
$(document).ready(function(){
   alert(“Hello again”);
});
结果两次都输出
简化写法
$(function(){
   // do something
});

以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是$(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高Web 应用程序的速度。

 

另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。

例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。

 Load() 方法会在元素的onload 事件中绑定一个处理函数。

如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

 

总结:
js: window.onload页面一运行就执行该函数,执行该函数时,可能页面中的图片还没有加载完成!
jquery: $(window).load()页面中的图片或其它东西加载完成之后,执行该函数。

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

相关文章
jQuery js 互转
jquery中可以用js操作 jQuery对象转成DOM对象:  两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);  (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。  如:var $v =$("#v") ; //jQuery对象  var v=$v[0]; //DOM对象 
856 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1059 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1070 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
795 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1004 0
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
2218 0
12 月份 10 个新鲜的 jQuery 插件和教程
1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行位置滑动。
703 0
20+ 个有用的 Google 地图的 jQuery 插件和教程
gMap – Google Maps Plugin For jQuery bMap – jQuery Plugin $.goMap – google maps jQuery plugin qmap3 – A jQuery plugin to use google maps vers...
900 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
973 0
+关注
涂作权
java,架构,编程语言相关专家
1234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载