WEB页面的生命周期,DOMContentLoaded,load,beforeunload,u

来源:http://www.chinese-glasses.com 作者:Web前端 人气:89 发布时间:2020-04-22
摘要:时间: 2019-09-25阅读: 50标签: 加载 10bet,理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解,在元素未加载就提前操作元素,则得不到想要的结果。而

时间: 2019-09-25阅读: 50标签: 加载

10bet,理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解,在元素未加载就提前操作元素,则得不到想要的结果。而如果页面完全加载完成后,再进行操作,则又会影响用户体验。

1 .window.onload

一般来说,大多数的操作我们都应该放在DOMContentLoaded事件中执行。采用如下形式:

表示页面包含图片等文件在内的所有元素都加载完成。

document.addEventListener('DOMContentLoaded', function () { alert("DOMContentLoaded");});

2 document.ready

当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。

函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。

理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义。用过JQuery都知道,我们大多将代码写在$.ready()中,当文档加载完成后,就会执行该函数。如果不这样做,在文档未加载完成之前操作DOM,就得不到想要的结果。

3 document.onreadystatechange

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>42度空间-Html页面的生命周期,DOMContentLoaded,load,beforeunload,unload</title></head><body><div ></div><iframe src="http://res.42du.cn/static/html/iframe.html" height="35" onload="append('iframe onload')"></iframe><div><img src="http://res.42du.cn/up/201802/cbbtiga6.jpg?cache=none" onload="append('image onload')"></div><script> var output = ""; function print() { document.getElementById.innerHTML += output; } function append { output += data+" <br />"; } document.addEventListener('readystatechange', function () { append("readyState : "+document.readyState); }); document.addEventListener('DOMContentLoaded', function () { append("DOMContentLoaded"); }); window.onload = function () { append("window onload"); print(); }; append("script executed");</script></body></html>

当页面加载状态改变的时候执行,可以监测DOM数状态的改变,例如加载完成等,有以下几种状态

从演示程序运行结果,得出一般浏览器的加载顺序如下:

本文由10bet发布于Web前端,转载请注明出处:WEB页面的生命周期,DOMContentLoaded,load,beforeunload,u

关键词:

最火资讯