window.onload在文档加载完成后执行
验证a 、b两点疑惑：
a.<script src="./main.js"></script>中的window.onload是在html全部加载完了才执行，还是其在html中所处位置之前的加载完就执行？
b. <script src="./main.js"></script>中window.onload有和没有 的区别是什么？
结论：
a.
answer：在html全部加载完了才执行。
b.
answer：区别就是，window.onload是html页面的所有文档都加载完毕后，执行window.onload里的内容。因而加了window.onload的main.js不论在html的哪个位置引入，均不会出现html元素找不到的错误 。 没有window.onload的js文件，需要在其所关联html的那部分代码后面引入，方可，否则，会出现html元素找不到的错误 。
以下为验证全过程：
代码结构预览
main.js :
window.onload=function(){
var app=new Vue({
el:"#app-4",
data:{
todos:[{
text:"first one"
},{
text:"second one"
},{
text:"third one"
}]
}
})
alert("app did!")
}
index.html :
<html>
<head>
<title>xx</title>
<script src="./vue.js"></script>
<script src="./main.js"></script>
<a href="./vue.js"></a>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
</body>
</html>
执行过程（按chrome中真实的执行顺序罗列）
1.
2.
说明：是先走到main.js里的window.onload，之后再显示出html的其余部分。
========================================================================================================
//现在将html的<script src="./main.js"></script>代码位置稍作调整,为谨慎起见，增加一行<div>html中Dom的加载。。。</div>
index.html :
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<script src="./vue.js"></script>
<a href="./vue.js"></a>
</head>
<body>
<div>html中Dom的加载。。。</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script src="./main.js"></script>
</body>
</html>
1.
2.
说明：有window.onload的main.js在哪里引入都一样。【注意:均不会出现html元素找不到的错误】
=========================================================================
以上说述，是main.js中有window.onload时。
=========================================================================
// 现在,将window.onload去掉!!!
=========================================================================
以下所述，是main.js中没有window.onload时。
=========================================================================
main.js :
// window.onload=function(){
var app=new Vue({
el:"#app-4",
data:{
todos:[{
text:"first one"
},{
text:"second one"
},{
text:"third one"
}]
}
})
alert("app did!")
// }
index.html :
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<script src="./vue.js"></script>
<script src="./main.js"></script>
<a href="./vue.js"></a>
</head>
<body>
<div>html中Dom的加载。。。</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
</body>
</html>
1.
2.
说明：先加载的main.js中的内容，此时html并没有加载完（后面需要显示的内容还没有加载）【注意:此时，出现html元素找不到的错误（2.图）】
=============================================================
//将index.html中的<script src="./main.js"></script>代码位置稍作调整
index.html :
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<script src="./vue.js"></script>
<a href="./vue.js"></a>
</head>
<body>
<div>html中Dom的加载。。。</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script src="./main.js"></script>
</body>
</html>
1.
2.
说明：html加载完（后面需要显示的内容还没有加载），之后加载main.js中的内容【此时，与有window.onload时的场景下，呈现顺序一致】
window.onload在文档加载完成后执行的更多相关文章
- 基于DOMContentLoaded实现文档加载完成后执行的方法
我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...
- js 文档加载完成之后执行 备用
//文档加载完成之后执行 (function(){ var _globeCallback; window.$$ = function(callback){ _globeCallback = callb ...
- js中defer实现等文档加载完在执行脚本
我们可以使用defer来实现类似window.onload的功能: <script src="../CGI-bin/delscript.js" defer></s ...
- jQuery在HTML文档加载完毕后自动执行某个事件；
原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...
- html文档加载顺序简单理解
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- document.write ： 什么是在html输出中使用，什么是文档加载后使用？
理解:您只能在 HTML 输出中使用 document.write.如果您在文档加载后使用该方法,会覆盖整个文档. Javascript中只能在 HTML 输出流中使用 document.write, ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- 原生JS与jQuery文档加载完毕的写法
HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...
- window.onload和jquery等待加载的区别
1.区别 window.onload是等待页面所有文档,图片等元素都加载完成再进行操作,是javascript原生语法. jquery是等待页面文档加载完成时,就进行操作. $(function(){ ...
随机推荐
- Docker运行dotnetcore
windows下安装docker 参考: https://www.jianshu.com/p/502b4ac536ef https://docs.docker.com/ ...
- s3c2440裸机-代码重定位（2.编程实现代码重定位）
代码重定位(2.编程实现代码重定位) 1.引入链接脚本 我们上一节讲述了为什么要重定位代码,那么怎么去重定位代码呢? 上一节我们发现"arm-linux-ld -Ttext 0 -Tdata ...
- (办公)记事本_Linux目录
转载自菜鸟教程:https://www.runoob.com/linux/linux-system-contents.html /bin: bin是Binary的缩写, 这个目录存放着最经常使用的命令 ...
- 安装swoole出现make报错的原因与解决方法
安装swoole报错,错误信息如下: 报错原因 报错很明显,找不到 openssl/ssl.h ,首先要确认电脑上有没有安装 openssl Mac安装openssl 既然它找不到,那么就需要手动的指 ...
- vmalloc/vfree问题思考记录
arm 32 用户进程陷入内核态通过vmalloc/vfree分配内存的流程 内核在更新非连续内存区对应的页表项是非常懒惰的.--<深入理解linux内核> arm 32 只有一个PGD ...
- jQuery 源码解析(二十六) 样式操作模块 样式详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj) ;参数 ...
- 一文带你深入浅出Spring 事务原理
Spring事务的基本原理 Spring事务的本质其实就是数据库对事务的支持,没有数据库的事务支持,spring是无法提供事务功能的.对于纯JDBC操作数据库,想要用到事务,可以按照以下步骤进行: 获 ...
- Egg 企业级应用开发框架的搭建
在之前的文章中我们介绍了一下基于 nodejs 开发的 koa2 框架,在之前还有 espress 框架,接下来我们再学习一个 Egg.js. Egg.js 中文官网:https://eggjs.or ...
- css盒子布局,浮动布局以及显影与简单的动画
08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...
- Vulnhub DC-1靶机渗透学习
前言 之前听说过这个叫Vulnhub DC-1的靶机,所以想拿来玩玩学习,结果整个过程都是看着别人的writeup走下来的,学艺不精,不过这个过程也认识到,学会了很多东西. 所以才想写点东西,记录一下 ...