JS方法加载有两种事件:
1. ready。表示文档结构已经加载完成(不包含图片等非文字媒体文件);
2. onload。指示页面包含图片等文件在内的所有元素都加载完成。
一般情况一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。那么document.ready事件在“加载js和css”和“加载图片等其他信息”之间。比如有时我们发现我们的js方法是是没生效的,这就是由于DOM的加载顺序而导致的。比如下代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>index.jsp</title>
<script src="<%=basePath%>static/js/vue/Vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
使用Vue在页面输出Hello Vue!是没效果的,页面只输出{{ message }},若要使其生效,则必须将脚本放置在{{ message }}后面才可以。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>index.jsp</title>
<script src="<%=basePath%>static/js/vue/Vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</html>
此时页面才会正常的打印出Hello Vue!的内容,但现在问题来了,如果我就要放置在head标签中呢?这就涉及到我们开始提到的加载顺序。
1.原生js的onload加载方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>index.jsp</title>
<script src="<%=basePath%>static/js/vue/Vue.js"></script>
<script type="text/javascript">
window.onload=function(){
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
};
//引入jquery后可使用如下,效果相同
$(window).load(function (){
//....
});
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
在元素的 onload 事件中绑定一个处理函数。假设处理函数绑定给 window 对象。则会在全部内容 ( 包含窗体、框架、对象和图像等 ) 载入完成后触发。假设处理函数绑定在元素上,则会在元素的内容载入完成后触发。
2.利用jquery实现的ready加载(需引入jquery.js)
$(document).ready(function(){
});
//上面的代码也可以简写为如下内容
$(function(){
});
3.DOM元素加载之前执行
(function(){
alert("DOM加载之前执行!");
})(jQuery);
上面的代码alert会在DOM加载之前执行
4.总结
window.onload必须等到页面内包含图片的全部元素载入完成后才干运行。
$(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成后。
window.onload不能同一时候编写多个,假设有多个window.onload方法,仅仅会运行一个。
$(document).ready()能够同一时候编写多个。而且都能够得到运行。