页面加载顺序及触发的事件

页面加载大致的几个步骤

1.开始解析HTML文档结构。

2.加载外部样式表及JavaScript脚本。

3.解析执行JavaScript脚本。

4.DOM树渲染完成。

5.加载未完成的资源(如图片)。

6.页面加载成功。

页面加载触发的事件

1.document的readystatechange事件

简单例子:

document.onreadystatechange = function() { // 文档加载状态改变事件处理
    if (document.readyState === "loading") { // document加载中
        console.log(document.readyState);
    }
    if (document.readyState === "interactive") { // 互动文档加载完成,文档解析完成,但是如图像,样式表和框架等子资源仍在加载中
        console.log(document.readyState);
    }
    if (document.readyState === "complete") { // 文档和所有子资源加载完成,load事件即将被触发
        console.log(document.readyState);
    }
}

readyState属性描述了文档的加载状态,整个加载过程中document.readyState会不断变化,每次变化都触发readystatechange事件。

也可以用事件监听器去绑定:

document.addEventListener("readystatechange", function() {
    console.log(document.readyState);
});

2.document的DOMContentLoaded事件

DOM树渲染完成时候触发DOMContentLoaded事件,此时可能外部资源还在加载。jQuery中的ready事件就是实现的这个事件。

3.window的load事件

当所有的资源全部加载完成后就会触发window的load事件。

"三千年前的月亮,是否和今夜一样呢。"

原文地址:https://www.cnblogs.com/yanggb/p/9154779.html

时间: 2024-10-10 07:23:12

页面加载顺序及触发的事件的相关文章

jQuery和dom页面加载完成时触发的事件

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 7 <script

C# 问题解决思路--《数组bytes未定义》,ASP.NET页面加载顺序

好久没写博客了,废话不多说,直接说问题. 问题发生情况,首先这个是老项目,然后我是第一次修改.当我解决了各种引用,数据库配置之后等类似的问题,我启动的项目的时候,无任何问题,但是当我点击页面的按钮的时候,就报类型的错误. 因此,我按照我个人的经验,做出排查. 1.首先是代码问题,我根据按钮找到对应的后台事件,然后加上断点,发现根本就不进对应的断点.(说明不是按钮的后台代码的错误) 2.有可能是整个页面的后台代码的其他的错误,因此我搜索了该后台代码  看是否哪里出现了 bytes这个数组,结果没有

C# web 页面加载顺序--转载

ASP.NET页面生命周期描述 下面是ASP.NET页面初始的过程: 1. Page_Init(); 2. Load ViewState; 3. Load Postback data; 4. Page_Load(); 5. Handle control events; 6. Page_PreRender(); 7. Page_Render(); 8. Unload event; 9. Dispose method called;  下面对其中的一些过程作下描述: 1. Page_Init();

IOS 页面加载顺序

1.alloc                                   创建对象,分配空间 2.init (initWithNibName)         初始化对象,初始化数据 3.loadView                            从nib载入视图 ,通常这一步不需要去干涉.除非你没有使用xib文件创建视图 4.viewDidLoad                   载入完成,可以进行自定义数据以及动态创建其他控件 5.viewWillAppear   

实现页面加载完后触发select的onchange事件

1 如题,很多时候打开页面要直接在select里面执行onchange()事件进行逻辑处理,所以可以在window.load来实现即可. <script>window.onload = function(){ var obj = document.getElementById("time_type"); if(window.event) obj.fireEvent("onchange"); else{ var e = document.createEve

JS 页面加载触发事件 document.ready和window.onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 使用jq时一般都是这么开始写脚本的: $(function(){ // do something }); 例如: $(function() { $("a").click(function() { alert(&

JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和onload的区别 document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 用jQ的人很多人都是这么开始写脚本的: $(function(){       // do something }); 例如: $(functi

jQuery 页面加载事件

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 复制代码 代码如下: $(function(){ // do something }); 其实这个就是jq ready

html页面的加载顺序

页面加载顺序: 解析HTML结构加载外部脚本和样式表文件解析并执行脚本代码构造HTML DOM模型加载图片等外部文件页面加载完毕 window.onload = function () {  }  //它的函数会在页面渲染成功后才会调用,引用js文件的时候要注意引用顺序,如果js先执行,而DOM还没渲染完,则设置的js就不会生效 原文地址:https://www.cnblogs.com/prospective-zkq/p/10246595.html