【HTML5】DOMContentLoaded事件

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

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

document.addeventListener(‘DOMContentLoaded‘,function(){...},false);

时间: 2024-10-05 10:24:26

【HTML5】DOMContentLoaded事件的相关文章

DOMContentLoaded事件解析

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件.    与DOM中的onLoad事件与其相近.但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等. 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起     的图片加载过慢( 见: Ajax优化(2) -lazierLoad img && js)

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

1.onload 事件 定义与语法 onload事件会在页面或者图像加载完成后立即发生. 法:onload="SomeJavaScriptCode“: 参数:SomeJavaScriptCode    描述:必需.规定该事件发生时执行的 JavaScript. 支持该事件的 HTML 标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

模拟DOMContentLoaded事件

window.load事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析完成时,Document会触发DOMContentLoaded事件.此时,页面引用的样式表和图像文件,以及包含的框架页面可能还没有加载完成. 浏览器兼容性:Chrome 0.2+ , Firefox 1.0+, IE9+, Opera 9.0+, Safari 3.1+ 模拟DOMContentLoad

JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在"所有的DOM全部加载完毕并且JS加载执行后触发". 但如果"js是通过动态加载进来的话,是不会影响到DOMContentLoaded的触发时间" 如下图所示,蓝色的线代表DOMContentLoaded开始触发,但前提是JS已经加载完毕并执行了. (仅仅是DOM 并不是onload事件整个页面全部加载完毕触发,DOMContentLoaded比onload要早触发 请区

(一)html5 touch事件实现页面上下滑动

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo. 下午好生研究了下终于搞出了个比较全面的上下滑动的小demo,代码比较简单. 下面是完整代码,我把几个重要的地方做了红色标记 <!doctype html> <html lang="en"> <head> <

关于windows phone 8.1系统手机对html5触摸事件的支持情况

近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统,所以只支持了html5触摸事件(如touchstart). 印象中WP系统应该只支持MS开头(如MSPointerDown)的指针事件,但测试结果很出人意料:项目在WP8.1的Lumia 640手机上竟完全可以正常运行,并支持了所有的触摸事件... 对于这个问题我挺不解的,于是就查阅了下msdn文档

HTML5-常见的事件- DOMContentLoaded事件

一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则在形成完整DOM树之后就会触发,不理会图像.JavaScript文件.CSS文件或其他资源是否已经下载完成. DOMContentLoaded :好处就是可以在页面下载早起就可以添加事件处理程序,这样意味着用户能够尽早地与页面进行交互. 添加DOMContentLoaded事件如下: EventUt

DOMContentLoaded事件&lt;zz&gt;

今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过.                    if (document.addEventListener)                        document.addEventListener("DOMContentLoaded", init, fals

深入理解Javascript封装DOMContentLoaded事件

最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加window.onload事件,主要是为了在DOM加载完后可以使用getElementById,getElementsByTagName等方法选取DOM元素进行操作,但是window.load会等到加载完DOM.脚本.CSS,最后加载完图片甚至是iframe中的所有资源才会触发,很多时候网页的图片较多

DOMContentLoaded事件

今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过.                    if (document.addEventListener)                        document.addEventListener("DOMContentLoaded", init, fals