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(){ ...
随机推荐
- Cocos2d-x游戏实例《忍者飞镖》之对象管理
推荐移步至<忍者飞镖射幽灵>之对象管理阅读 配置环境:win7+Cocos2d-x.2.0.3+VS2012 目标读者:需了解游戏帧率以及回调函数的概念 一.引言 对具体游戏demo的分析 ...
- CF 1114D(538,div2) Flood Fill
https://codeforces.com/contest/1114/problem/D 题目 给一串数字,首先选择一个位置,类似于画图,然后每一轮按照以下步骤: 可以将这个位置所在的连通块改成其他 ...
- [译]Vulkan教程(18)命令buffers
[译]Vulkan教程(18)命令buffers Command buffers 命令buffer Commands in Vulkan, like drawing operations and me ...
- 用 Python 破解 WiFi 密码
如今,WiFi 跟我们的生活息息相关,无处不在.没有 WiFi 的地方是没有灵魂的! 然而,比没有WiFi更让人绝望的,是有满格WiFi信号却没有密码…… 今天我们就来尝试下,如何利用pyth ...
- SpringBoot系列之@PropertySource读取yaml文件
SpringBoot系列之@PropertySource支持yaml文件读取 最近在做实验,想通过@PropertySource注解读取配置文件的属性,进行映射,习惯上用properties都是测试没 ...
- ETCD:gRPC代理
原文地址:gRPC proxy gRPC代理是在gRPC层(L7)运行的无状态etcd反向代理.代理旨在减少核心etcd群集上的总处理负载.对于水平可伸缩性,它合并了监视和租约API请求. 为了保护集 ...
- Vue 从入门到进阶之路（十二）
之前的文章我们介绍了一下 vue 中插槽的使用,本章我们接着介绍一下 vue 中的作用域插槽. <!DOCTYPE html> <html lang="en"&g ...
- Go初学乍练 - 安装以及开发环境搭建
本文介绍主要以Windows作为开发系统环境 1.下载SDK 官方下载页:https://golang.org/dl/ 官方下载地址: 地址 类型 https://dl.google.com/go/g ...
- 微信公众号支付提示当前页面的URL未注册
问题: 记一下前端时间自己做了一个微信公众号支付的功能,因为有一段时间没有接触过了微信支付方面的开发,居然忘记了在微信商户商户号中配置了对应的支付目录,所以提示我当前的域名是没有注册的. 设置支付目录 ...
- java基础(4):引用数据类型、流程控制语句
1. 引用数据类型 1.1 Scanner类 我们要学的Scanner类是属于引用数据类型,我们先了解下引用数据类型. 引用数据类型的使用: 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有 ...