页面加载后自动执行：
1.页面中很多数据都需要在页面加载完成，就自动发送ajax请求，填充到页面，无需用户手动操作。
有些元素的事件处理函数，也是在页面加载完成后，自动绑定上的。
2.解决：由于页面是顺序加载的，希望页面加载自动执行的代码，都放在body结尾的script中。
3.将js代码写在html文件中，不符合内容与行为分离的原则，不便于维护。
4.今后js代码都要放在独立的js文件中，在引入HTML文件里。
5.有的会放在开头，有的会放在结尾，如何保证不管放哪都可以自动执行？
6.解决：把页面初始化代码放在页面的加载完成事件中，等到页面加载完成后，才执行触发。
a.每个网页都有window.οnlοad=function(){…}事件
b.无论在哪里绑定这个事件，这个事件始终只在整个页面内容加载完成才触发，页面引入的css是异步执行的，js是同步执行的
c.因为js代码会影响页面加载速度，最好还是放在body结尾
7.但是window.οnlοad=function(){…}是以赋值的方式绑定的事件，如果有多个js文件，会被覆盖。
8.解决：为了给一个onload同时添加多个事件处理函数，应该将赋值方式替换成添加事件监听的方式。window.addEventListener(“load”,function(){…})
9.有时基于用户操作，不需要等待样式和图片加载完成----春运抢票，应该让用户在样式和图片加载完成之前就能提前用上操作，而不必等css和图片。
10.解决：其实网页加载过程中，有两次页面加载完成事件。
a.先：DomContentLoaded：仅html+js下加载完成就提前触发。
b.再：window.onload：必须等html+css+js+图片下载生成才触发–>Network的两条线
c.只需要将提前执行的操作，放在DomContentLoaded中，就可以不必等待css和图片，就能让用户提前用到
d.DomContentLoaded有兼容性问题
e.jq已经封装了DomContentLoaded事件
$(document).ready(function(){…})，会在DomContentLoaded阶段提前自动执行
(
(
)
=
>
.
.
.
)
E
s
6
中
，
(()=>{...}) Es6中，
(()=>...)Es6中，(function(){…})
今后：所有的jq代码，都要放在
(
f
u
n
c
t
i
o
n
(
)
.
.
.
)
中
f
.
但
是
个
别
必
须
c
s
s
和
图
片
才
能
正
常
执
行
的
代
码
只
能
放
在
w
i
n
d
o
w
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
"
l
o
a
d
"
，
f
u
n
c
t
i
o
n
)
j
q
中
：
(function(){...})中 f.但是个别必须css和图片才能正常执行的代码只能放在window.addEventListener( "load"，function ) jq中：
(function()...)中f.但是个别必须css和图片才能正常执行的代码只能放在window.addEventListener("load"，function)jq中：(window).load(function(){…})
index.html
引入jq.js文件
引入1.js文件
引入2.js文件
<script>
window.onload=function(){
alert(`所有页面加载完成`);
}
</script>
<body>
<button id="btn1">
<button id="btn2">
</body>
1.js
//所有页面加载完成后自动执行
window.onload=function(){
window.addEventListener("load",function(){
$(document).ready(function(){
$(function){
$(()=>{
alert(`仅html+js加载完执行btn1`);
$("btn1").click(function){
alert(`btn1疼!`);
}
})
}
})
})
}
2.js和1.js一样
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
