DOMContentLoaded 和 load 事件的区别

这两个事件DOMContentLoaded和load用于检查网页何时完全加载。尽管如此，还是有一些因素决定了一个人对另一个人的偏好。让我们来看看它们并了解它们的工作原理。

DOMContentLoaded事件在加载基本 HTML 文档并进行解析后执行。此事件不会等待加载项(例如样式表、子框架和图像/图片)的加载完成。

语法：

document.addEventListener("DOMContentLoaded", function(e) {
  console.log("GfG page has loaded");
});

示例 1：

  

    
        Output of DOMContentLoaded and Load events
    
  
    
        document.addEventListener("DOMContentLoaded", function(e) {
            console.log("GfG page has loaded");
        });
    

  

    

  

输出：

在输出中，可以看到控制台日志窗口显示消息，这表示加载网页的 DOM 已完成。

使用 DOMContentLoaded 事件的优点：

• 它有助于改善用户体验，因为它可以更快地显示消息或内容。
• 加载页面所需的时间更少。

load事件以不同的方式执行。一旦加载了所有组件，即 DOM 层次结构以及网页的相关功能(如 CSS 文件、JavaScript 文件、图像/图片和外部链接)，此事件就完成了。所以基本上，加载事件有助于了解页面何时完全加载。

语法：

document.addEventListener("load", function(e) {
  console.log("The page has completely loaded.");
});

示例 2：

  

    
        Output of DOMContentLoaded and Load events
    
  
    
        document.addEventListener("load", function(e) {
            console.log("GfG page has loaded completely");
        });
    

  

    

  

输出：

使用加载事件的优点：

• 此事件有助于了解网页的所有组件何时加载。