DOMContentLoaded事件和加载事件之间的区别

2020/10/09 01:41 · javascript ·  · 0评论

DOMContentLoadedload事件有什么区别

Mozilla开发人员中心

当文档已经完全加载和解析时,将触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载(load事件可用于检测已完全加载的页面)。

DOMContentLoaded一旦完全构建了DOM层次结构,就会触发该load事件,当所有图像和子帧均已加载完成时事件就会触发

DOMContentLoaded将可在大多数现代浏览器上使用,但不适用于包括IE9及更高版本的IE有一些变通办法可以在较旧版本的IE上模拟此事件,例如jQuery库上使用的变通方法,它们会附加IE特定的 onreadystatechange事件。

自己看看区别:

演示

Microsoft IE

当前页面的解析完成时,将触发DOMContentLoaded事件。当所有文件从所有资源(包括广告和图片)加载完成后,就会触发load事件。DOMContentLoaded是一个很棒的事件,可用于将UI功能连接到复杂的网页。

来自Mozilla开发人员网络

当文档已经完全加载和解析时,将触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载(load事件可用于检测已完全加载的页面)。

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

在文档“就绪”之前,无法安全地操纵页面。jQuery为您检测到这种就绪状态。$(document).ready()仅在页面文档对象模型(DOM)准备好执行JavaScript代码后,内部代码才会运行。$(window).load(function() { ... })一旦整个页面(图像或iframe)(而不仅仅是DOM)准备就绪,其中包含的代码就会运行。

请参阅:使用JQuery Core的文档就绪文档

  • domContentLoaded:标记这两个DOM都准备就绪并且没有样式表阻止JavaScript执行的时间-这意味着我们现在可以(潜在地)构造渲染树。许多JavaScript框架在开始执行自己的逻辑之前会等待此事件。因此,浏览器捕获了EventStart和EventEnd时间戳,以使我们能够跟踪执行该过程所花费的时间。

  • loadEvent:作为每个页面加载的最后一步,浏览器将触发“ onload”事件,该事件可以触发其他应用程序逻辑。

资源

这是一些对我们有用的代码。我们发现MSIE容易受到影响,DomContentLoaded如果没有其他资源被缓存,则似乎会有一些延迟(根据控制台日志记录,最长为300ms),并且缓存它们时,触发速度太快。因此,我们对MISE求助。您还想触发doStuff()函数,无论是DomContentLoaded在外部JS文件之前还是之后触发。

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}
本文地址:http://javascript.askforanswer.com/domcontentloadedshijianhejiazaishijianzhijiandequbie.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!