文档章节

js中页面加载完成后执行的几种方法及执行顺序

o
 osc_isezqdgg
发布于 2019/09/18 16:20
字数 484
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。

1:使用jQuery的$(function){};

2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。

3:使用jQuery的$(window).load(function(){});

4:使用window.onload = function(){} 第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别,只是一个使用dom对象,一个使用jQuery对象。

5:在标签上静态绑定onload事件,<body onload="aaa()">等待body加载完成,就会执行aaa()方法。

那么,这五种方式,执行的先后顺序是怎么样的呢?

通过下方代码验证发现:

        使用1:jQuery的$(function){}和2:jquery的$(document).ready(function(){});无论位置放置在哪里,总是优先其余三种方式(原因是:这两种方式是在document加载完成后就执行,后三种是等到整个window页面加载完成后才执行),这两者之间的执行顺序是谁在上方谁优先执行。

        使用3:jQuery的$(window).load(function(){});

    4:window.onload = function bbb(){}这两种方式,总是优先于<body onload="aaa()">执行。他们两者执行顺序也是根据谁在上方谁先执行。

       使用5:<body onload="aaa()">总是最后执行。

 

 1 <script type='text/javascript'>
 2 
 3   window.onload = function(){
 4     alert("页面加载完成====》onload");
 5   }
 6 
 7   $(window).load(function(){
 8     alert("jquery===》window load" );
 9   })
10 
11   $(document).ready(function () {
12     alert("jquery====》document ready");
13   });
14 
15   $(function(){
16     alert("jquery====》document onload");
17   });
18 
19   function aaa(){
20     alert("静态标签====》onload");
21   }
22 
23 </script>

本文链接:https://www.cnblogs.com/yifeixue/p/11543250.html

如转载文章,请注明出处,谢谢!

 

本文源自:https://www.cnblogs.com/Loveonely/p/8118256.html

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
网页性能优化之异步加载js文件

一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件。在谈异步加载之前,先来看看浏览器加载js文件的原理。 浏览器加载 JavaScript 脚本,主要通过元素完成。...

酥风
2018/10/23
0
0
网页性能优化之异步加载js文件

一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件。在谈异步加载之前,先来看看浏览器加载js文件的原理。 浏览器加载 JavaScript 脚本,主要通过元素完成。...

osc_6bjpmnwf
2018/10/22
3
0
异步加载js详解

优化脚本文件的加载提高页面的加载速度,一直是前端工程师提高页面加载速度很重要的一条。因为涉 及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览...

飛飛飛jjs
2017/06/21
0
0
JS异步加载的三种方式

一:同步加载 我们平时使用的最多的一种方式。 <script src="http://yourdomain.com/script.js"></script><script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式......

bengozhong
2018/07/06
647
0
如何实现JS异步加载

该总结看似和以上两个问题不相关,实则回答了以上问题。 一、为什么要JS异步加载? 因为同步加载存在问题! JS在默认情况下是以同步模式(又称阻塞模式)加载的,这里“加载”的意思是“解释...

chenhongjiang
2019/08/21
7
0

没有更多内容

加载失败,请刷新页面

加载更多

使用命名管道承载gRPC

最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了。 gRPC设计 gRPC是一种与语言无关的高性能远程过程调用 (RPC) 框架。刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解...

osc_nq69o22c
9分钟前
8
0
06-敏捷开发框架-apis 脚本库 引用位置无关性设计

动态引入技术的设计,对我们来说非常重要。 同时也说明动态语言的使用对我们来说也是非常重要。 没有动态语言的支撑,有些想法可能不容易实现,或者有替代方案,可能会花更大的代价。 前端开...

osc_5zg9z6t1
10分钟前
0
0
(三)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行①的模块部分

  了解到了OrchardCore主要由两个中间件(ModularTenantContainerMiddleware和ModularTenantRouterMiddleware)构成,下面开始了解ModularTenantContainerMiddleware中间件第一行代码。   ...

osc_kdarxvx0
12分钟前
0
0
50Mn18Cr4V锻锻环件

电机无磁护环怎么锻性能才能《高高》?50Mn18Cr4V高锰无磁钢在变形温度为900~1 100℃、应变速率为0.1 ~10s-1条件下的热变形行为. 结果,VC第二相的应变诱导析出对50Mn18Cr4V的热变形行为产生...

无磁钢
12分钟前
16
0
【遇见offer】一汽-大众实习生专场来啦!成长+学习+福利,一个也不能少~

在上次一汽-大众的社招直播之后,实习生的专场招聘也终于来啦! 针对2020年暑期,我们提供了非常多的实习岗位给大家选择。 如果你想得到大厂实习的宝贵经验,如果你想得到更快速的成长,如果...

osc_b88oux8w
13分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部