跳至主要內容

加载调用

LincZero大约 3 分钟有道云

加载调用

JS加载调用

JS在页面加载之后运行

通用的页面加载后再运行JS有两种方式：1、在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前运行JS。 2、在页面全部内容加载完成（包括引用文件，图片等）之后再加载JS

【第一优先级】在DOM加载后，全部内容加载前运行

这种方式在同一文件中可以运行多个且不会覆盖

由于在$(document).ready()方法只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用Jquery中 load（）方法在需要的文件加载完毕后对其进行操作。

$(document).ready(function(){});	// jQuery，非简写
$().ready(function(){});			// jQuery，简写1，当$()不带参数时默认就是document
$(function(){});					// jQuery，简写2
$(()=>{});							// jQuery，简写2 + cs6简写

【第二优先级】在全部内容加载后运行

这种方式中只能执行一个 onload代码，当文件由多个onload或者load，只加载最后一个，前面的将会被覆盖且前面的onload里面的代码不会执行。

window.onload = function(){};		// js
window.onload = ()=>{}				// js + cs6简写
$(window).load(function(){});		// jQuery
<body onload="aaa()">				// html-js，等body执行完

DOM文档加载步骤

  1. 解析HTML结构
  2. 加载外部的脚本和样式文件
  3. 解析并执行脚本代码
  4. 执行$(function(){})内对应代码
  5. 加载图片等二进制资源
  6. 页面加载完毕，执行window.onload

顺序总结

注意：执行【07】和执行【08】相冲突！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>执行顺序研究</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>let a0 = document.getElementById("box");console.log("执行【00】",a0);</script>
</head>
<script>let a1 = document.getElementById("box");console.log("执行【01】",a1);</script>

<body onload="let a9 = document.getElementById('box');console.log('执行【09】',a9);">
  <script>let a2 = document.getElementById("box");console.log("执行【02】",a2);</script>
  <div id="box"></div>
  <script>let a3 = document.getElementById("box");console.log("执行【03】",a3);</script>
</body>

</html>
<script>let a4 = document.getElementById("box");console.log("执行【04】",a4);</script>
<script>$(()=>{let a6 = document.getElementById("box");console.log("执行【06】",a6);});</script><!--jQuery-->
<script>$(()=>{let a7 = document.getElementById("box");console.log("执行【07】",a7);});</script><!--jQuery-->
<!-- <script>window.onload = () => {let a8 = document.getElementById("box");console.log("执行【08】",a8);}</script> -->
<script>let a5 = document.getElementById("box");console.log("执行【05】",a5);</script>

打印结果

执行【00】 null					// body前
执行【01】 null					// body前
执行【02】 null					// body中
执行【03】 <div id="box">		// body中
执行【04】 <div id="box">		// body后
执行【05】 <div id="box">		// body后
执行【06】 <div id="box">		// jQuery方法
执行【07】 <div id="box">		// jQuery方法
// 执行【08】 <div id="box">	// onload方法，冲突、后者覆盖前者
执行【09】 <div id="box"> 		// onload方法