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(){ ...
随机推荐
- Fiddler常用设置
1.设置抓取HTTPS请求 勾选后弹窗添加证书确认框 点击yes后,弹出警告 点击是,成功添加证书 点击OK确认,设置成功了 成功抓取到HTTPS请求 2.自定义会话框,展示GET和POST请求 3. ...
- 如何在linux上有2个python的情况下安装gensim
安装python的问题 https://blog.51cto.com/liqingbiao/2083869 安装gensim https://blog.csdn.net/zhujiyao/articl ...
- 史上最全Oracle数据泵常用命令
本文转自https://blog.csdn.net/Enmotech/article/details/102848825 墨墨导读:expdp和impdp是oracle数据库之间移动数据的工具,本文简 ...
- 表单生成器(Form Builder)之伪造表单数据番外篇——指定范围随机时间
为了伪造一些尽量真实的假数据,也真是够费劲的.上一篇笔记记录了一下获取一个随机车辆牌照,这篇笔记记录一下怎么获取一个随机时间.这篇就不说那么多废话了,直接上代码 // 获取指定范围的随机数 var g ...
- docker-19.03安装部署，阿里源加速
docker所依赖的包环境,为了方便不报错,推荐执行 [root@liujunjun ~]# yum install -y yum-utils device-mapper-persistent-dat ...
- Mybatis----resultMap类型详解
Mybatis----resultMap类型详解 这篇文章主要给大家介绍了关于Mybatis中强大的resultMap功能的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Mybatis具 ...
- IDE开发小技巧-快速引包/替换关键词
快速引包 Ctrl+Shift+O 快速搜索/查找替换 Ctrl+F
- 安卓投屏助手(ARDC)最新版
安卓投屏助手(B1493) 1.兼容Android 10: 2.增加灭屏投屏功能: 3.增加显示鼠标位置功能; 4.增加了虚拟NaviBar功能: 5.捐赠界面增加QQ支付,移除Paypal,感谢大家 ...
- 利用重写R3环的ReadProcessMemory来防止恶意程序钩取
访问这里---> Windows系统调用中API的三环部分(依据分析重写ReadProcessMemory函数)
- ASP.NET MVC教程五：ASP.NET MVC中的路由
一.概述 在ASP.NET MVC架构中,控制器在3大核心构件中处于中心地位,通过控制器支配模型和视图,然而从浏览器发出的请求到控制器还需要路由的协助,路由将特定的请求和控制器的动作对应起来. 在AS ...