页面加载完成事件 - onload，四种写法

最新推荐文章于 2024-09-26 11:32:43 发布

一月清辉

最新推荐文章于 2024-09-26 11:32:43 发布

阅读量1.6w

点赞数 3

分类专栏： javascript 文章标签：页面加载完成 load

原文链接：https://www.cnblogs.com/xuxiaoyu/p/11554944.html

版权

javascript 专栏收录该内容

134 篇文章 15 订阅

订阅专栏

在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式：

js动态加载外部插件后，导致页面加载顺序不是按照代码的书写顺序执行，引起报错，
这时候就可以用监听页面加载完成事件来指定代码的加载顺序

1、JQuery方法

方法

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

说明
$(function){}是$(document).ready(function(){})的简写方式。
两个都是document加载完成后就执行回调的方法

2、window的load事件

方法

jquery写法：$(window).load(function(){})
js写法：window.onload = function(){}

说明
二者都是等到整个window加载完成执行的方法，本质上相同。

两种方法的区别

JQuery方法，是等待document加载完成后执行，
load方法，这里监控的是window加载完成后执行。
所以，这里load方法会在JQuery方法之后执行。

demo如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
    <body>    	
    </body>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type='text/javascript'>
		window.onload = function() {　　　　
			console.log("页面加载完成====》onload");　　
		}
		$(window).load(function() {　　　　
			console.log("jquery===》window load");　　
		})
		

        $(function() {　　　　
			console.log("jquery====》document onload");　　
		});
		$(document).ready(function() {　　　　
			console.log("jquery====》document ready");　　
		});
	</script>
</html>