…

1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash. 我们需要给一些元素的事件绑定处理函数.但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的. 这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数. DOM文档加载的步骤为 解析HTML…

IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断 是否构建好DOM树:如果html内有框架,则利用document的onreadystatechange事件判断当前DOM树是否构建完毕(框架html内容(只是html文件)加载之后DOM树构建完毕). 所以可以采用这种方式: /** * 实现DomContentLoaded的兼容性 * @param ca…

/* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * */ window.addEventListener( 'load', function() { var spans = document.querySelectorAll('span'); console.log( spans, 'load' ); } ); document.addEventLi…

document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ alert(2) } window.addEventListener("load",function(){ alert(4) }); $(document).ready(function(){ alert(3) }); 先弹出3然后1最后2,4.2,4属于同一事件…

Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenLoaded: 这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发.do…

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

这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发. domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是…

setTimeout(function(){ alert("settimeout"); },0); EventUtil.addHandler(window, "DOMContentLoaded", function(event){ alert("Content loaded."); }); EventUtil.addHandler(window, "load", function(event){ alert("Win…

对前端同学而言,loade,unload,DOMContentLoaded等页面加载过程中会触发的事件肯定是都接触过,不过要是具体问各个事件的区别,我就不是那么能清晰的解答上来的了.正好刚刚在无阻塞脚本那看到了DOMContentLoaded事件,就来翻翻具体文档详细看一下各个事件吧.常言道温故而知新,让我们一起回头看一下 触发时机 先看下各个事件的触发时机(参考自MDN) DOMContentLoaded 当初始html文档完全加载并解析之后触发,无需等待样式.图片.子frame结束.作为明显…