onload 事件、DOMContentLoaded事件、DOM加载顺序

1、onload 事件

定义与语法

onload事件会在页面或者图像加载完成后立即发生。

法:onload="SomeJavaScriptCode“;

参数:SomeJavaScriptCode    描述:必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象:image, layer, window

实例

在本例中,文本 "Page is loaded" 会被显示在状态栏中:

<html> <head> <script type="text/javascript"> function load() { window.status="Page is loaded" } </script> </head> <body > </body> </html>

2、DOMContentLoaded事件

这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。

domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
  document.addeventListener(‘DOMContentLoaded‘,function(){...},false);

3、DOM加载顺序

1、解析HTML结构。

2、加载外部脚本和样式表文件。

3、解析并执行脚本代码。

4、构造HTML DOM模型。

5、加载图片等外部文件。

6、页面加载完毕。

时间: 2024-10-13 10:40:52

onload 事件、DOMContentLoaded事件、DOM加载顺序的相关文章

DOM加载顺序

解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. 构造HTML DOM模型. 加载图片等外部文件. 页面加载完毕. <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Title</title> <style type="text/css"> body { font-sie:

html DOM加载顺序

前几天遇到一个问题:load和ready 哪个先执行? 针对这个问题我自己研究学习了一下DOM文档的加载步骤: 1.首先浏览器会解析静态的html结构 比如 head body footer等html标签 2.当html结构加载完成我们需要渲染页面使其美观,因此此时需要加载 各种样式表文件. 3.然后再解析并执行js或者其他脚本代码. 4.构造html DOM对象,也就是 ready 操作 5.加载html和css中引用的外部资源文件. 6.页面加载完成(load操作),js进行一些事件的绑定和

js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导致网页加载慢的问题

需引入文件:lazyload-min.js <script src="JS/lazyload-min.js" type="text/javascript"></script> 插入代码: function loadscript() { LazyLoad.loadOnce([ 'JS/touch.js', 'http://libs.baidu.com/jquery/1.2.3/jquery.min.js' ], loadComplete); }

原生JS实现AJAX、JSONP及DOM加载完成事件

一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 },

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

加载顺序 ready onload onreadystatechange

js文件是异步加载, js是在什么时候被加载执行的 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致 1/ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件):比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等: 2/onload,指示页面包含图片等文件在内的所有元素都加载完成.比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等: 支持该事件的 HTML 标签: <body>, <frame&g

DOM加载过程中ready和load的区别

在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有async或defer属性,就暂停解析,开始执行脚本和CSS样式 3. HTML文档解析完成 4. 浏览器等待图片.样式表.字体文件等外部资源加载完成 在这其中,有两个阶段: ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): load,表示页面包含图片等外部文件在内的所有元素都加载完成. DOM

javascript在html中的加载顺序

参考:[1]http://coolshell.cn/articles/9749.html(酷壳) [2]http://shaozhuqing.com/?p=2756 颜色标注分别来自于链接地址内容 通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染.其它资源的下载).于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行. 因为javascript可能会来操作HTML文档的DOM树,所以

jQuery实现DOM加载方法源码分析

传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但是onload事件触发过于缓慢,尤其是在存在很多外部图片或者视频文件的时候,为了更好的了解这一点有必要知道一个html文档是如何进行加载的,这里引用一个园友的表述: 1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件: 2.浏览器开始载入htm