美文网首页
DOMContentLoaded事件/Load事件的区别?

DOMContentLoaded事件/Load事件的区别?

作者: 开车去环游世界 | 来源:发表于2016-11-24 21:15 被阅读390次

    DOMContentLoaded事件,页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,它在两个地方都有体现:概览视窗的蓝色竖线,总览视窗的触发时间。

    Load事件,当所有资源加载完成后触发的,它在三个地方有体现:概览视窗的红色竖线,请求列表视窗的红色竖线,总览视窗的触发时间。

    DOMContentLoaded/Load事件

    结合DOM文档加载的加载步骤,DOMContentLoaded事件/Load事件,触发时机如下:
    1、解析HTML结构。
    2、加载外部脚本和样式表文件。
    3、解析并执行脚本代码。// 部分脚本会阻塞页面的加载
    4、DOM树构建完成。//DOMContentLoaded 事件
    5、加载图片等外部文件。
    6、页面加载完毕。//load 事件

    在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
    用原生js可以这么写

    // 不兼容老的浏览器,兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253),或用jQuery
    document.addEventListener("DOMContentLoaded", function() {
       // ...代码...
    }, false);
    
    window.addEventListener("load", function() {
        // ...代码...
    }, false);
    

    用jQuery这么写

    // DOMContentLoaded
    $(document).ready(function() {
        // ...代码...
    });
    
    //load
    $(document).load(function() {
        // ...代码...
    });
    

    相关文章

      网友评论

          本文标题:DOMContentLoaded事件/Load事件的区别?

          本文链接:https://www.haomeiwen.com/subject/chhipttx.html