原生js- 页面状态事件 -04

页面的加载状态有loading interactive completed 三种状态,但我们先来说说js的入口函数，话说之前我写的js代码都没有写入口函数，因为js可以省略不写，但是写与不写有区别吗，答案当然有。

1. 不写js的入口函数，script的 代码最好写在文件的末尾，因为在代码进行创建dom树的时候，如果在最开始就检测到script的代码，此时下面的代码还没有加载到dom树上，因此在script中就找不到用选择器选择还未加载到dom树上的元素。因此一般script都写在body的末尾。
2. 写js的入口函数，script的代码可以写在开头，window.onload = function(){代码}，window.onload会在dom树建立完毕，其中的src资源也加载完毕之后开始执行，因此可以写在任何地方，不过这样写的缺点就是，如果资源比较大的话，页面建立dom树需要加载很长时间，那么在此时页面上的js就无法执行即页面失去了交互的特性，直到页面加载完毕。

例子：1 不写js入口函数，加载一张超链接图片 script代码放head里面

<script type="text/javascript">
	var img= document.querySelector("img");
	console.log(img.width,img.height);
</script>
<img src="https://t12.baidu.com/it/u=2891621711,112522229&fm=76" >

意思就是img是null的，即未加载到img的元素

例子：2 不写js入口函数，加载一张超链接图片 script代码放在文件末尾里面

<img src="https://t12.baidu.com/it/u=2891621711,112522229&fm=76" >
<script type="text/javascript">
	var img= document.querySelector("img");
	console.log(img.width,img.height);
	console.log(document.readyState);
	//dom树建立完毕之后触发
	document.addEventListener("DOMContentLoaded",function(){//dom树建立好之后
		console.log("dom树创建完毕"+document.readyState);
	})
	img.onload = function(){
		console.log(img.width,img.height);
	}
	document.addEventListener("DOMContentLoaded",function(){//dom树建立好之后
		console.log("dom树创建完毕"+document.readyState);
	})
</script>

显示的结果如下： 可能你能显示到图片的宽度 那是因为你可能之前用浏览器加载过图片，因此数据就暂时保存在浏览器上，解决办法（chrome）打开浏览器设置 找到高级设置下的清除浏览器数据 就可以了。

分析:

1. 可以看出img的src的加载是异步的，所以没有加载到img的图片信息。
2. dom树在执行script时，并未触发到DOMContentLoaded 事件，因为此时dom树并未加载完毕， 所以看到此时的domcument.readystate是loading。
3. 图片在加载当加载完毕之后，先触发的是DOMContentLoaded显示状态时interactive可以交互的，然后触发 图片加载完之后的时间输出图片的size。

例子3 使用window.onload

<img src="https://t12.baidu.com/it/u=2891621711,112522229&fm=76" >
<script type="text/javascript">
	window.onload=function(){
		var img= document.querySelector("img");
		console.log(img.width,img.height);
		console.log(document.readyState);
		//dom树建立完毕之后触发
		document.addEventListener("DOMContentLoaded",function(){//dom树建立好之后
			console.log("dom树创建完毕"+document.readyState);
		})
		document.addEventListener("DOMContentLoaded",function(){//dom树建立好之后
			console.log("dom树创建完毕"+document.readyState);
		})
	}
</script>

显示的信息如下

可以看出图片资源已经加载完毕再一次证明 window.onload 已经把网页的所有资源加载完毕 后面的DOMContentLoaded时间都未触发，因为此时的dom已经建立完毕没有发生变化 所以不会触发事件了。