页面的加载状态有loading
interactive
completed
三种状态,但我们先来说说js的入口函数,话说之前我写的js代码都没有写入口函数,因为js可以省略不写,但是写与不写有区别吗,答案当然有。
- 不写js的入口函数,
script
的 代码最好写在文件的末尾,因为在代码进行创建dom树的时候,如果在最开始就检测到script的代码,此时下面的代码还没有加载到dom树上,因此在script中就找不到用选择器选择还未加载到dom树上的元素。因此一般script都写在body的末尾。 - 写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)打开浏览器设置
找到高级
设置下的清除浏览器数据
就可以了。
分析:
- 可以看出img的src的加载是异步的,所以没有加载到img的图片信息。
- dom树在执行script时,并未触发到DOMContentLoaded 事件,因为此时dom树并未加载完毕, 所以看到此时的
domcument.readystate
是loading
。 - 图片在加载当加载完毕之后,先触发的是
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已经建立完毕没有发生变化 所以不会触发事件了。