Document.addEventListener("load", function () { - Javascript

简介

document.addEventListener("load", function () {}); 是 JavaScript 中一个添加事件监听器的方法，它可以监听文档的加载事件。当文档完成加载后，该方法提供了一个回调函数来处理事件。

使用方法

该方法需要两个参数。第一个参数是要监听的事件类型；第二个参数是事件被调用时要执行的函数。

语法：

document.addEventListener("load", function() {
  // 事件发生时执行的内容
});

例如，可以使用以下代码来监听文档是否加载完毕：

document.addEventListener("load", function() {
  console.log("页面已加载完毕！");
});

监听器用途

在网站中加入媒体文件时，如果不经过适当的优化，可能会导致网站加载缓慢，影响用户体验。document.addEventListener("load", function () {}); 可以很好地解决这个问题。可以通过将优化图像、JS 和 CSS 文件等加载过程添加至该方法中实现站点性能的优化，例如：

document.addEventListener("load", function () {
  // 加载 JS 文件
  var script = document.createElement("script");
  script.src = "https://example.com/jsfile.js";
  document.querySelector("head").appendChild(script);

  // 加载 CSS 文件
  var css = document.createElement("link");
  css.rel = "stylesheet";
  css.href = "https://example.com/cssfile.css";
  document.querySelector("head").appendChild(css);

  // 加载图像
  var img = new Image();
  img.src = "https://example.com/image.jpg";
});

注意事项

• 在某些浏览器中，document.addEventListener("load", function () {}); 可能不会作为文档/CSS 等资源加载完成的事件被触发。
• 事件回调函数应小心设计，以免让网站的性能受到影响，如在加载过程中添加大量 JavaScript。
• 在使用 document.addEventListener("load", function () {}); 加载资源时，应该尽量缓存这些资源，减少对服务器资源的消耗。

以上代码片段演示了如何通过document.addEventListener("load", function () {}); 方法监听文档的加载事件，并且通过添加回调函数实现了资源的优化加载。该方法可以帮助程序员处理页面各种加载事件，进而优化网站性能，提升用户体验。