如何为load事件监听器添加延时，确保网站预加载intro总能被看到？

你可以通过结合setTimeout与时间计算，确保预加载动画至少显示指定时长，同时避免页面加载慢时让用户额外等待。修改后的代码如下：

let loader = document.getElementById("preloader");

// 记录页面开始加载的时间点
const loadStartTime = Date.now();
// 预加载动画最少要显示的时长（单位：毫秒），可根据需求调整
const minDisplayDuration = 2000;

window.addEventListener("load", function () {
  // 计算从页面开始加载到完成已经过去的时间
  const elapsedTime = Date.now() - loadStartTime;
  // 计算需要延时的时间：如果已加载时间小于最少显示时长，延时剩余时间；否则不延时
  const delay = Math.max(minDisplayDuration - elapsedTime, 0);

  setTimeout(() => {
    loader.style.display = "none";
  }, delay);
});

说明： #

• 这种方式兼顾两种场景：页面加载快时，动画会显示够设定的最少时长；页面加载慢时，会在加载完成后立刻隐藏动画，不会让用户额外等待。
• 你可以修改minDisplayDuration的值来调整动画的最短显示时间，比如设为1500就是1.5秒。

如果只是想简单给隐藏操作加固定延时（不考虑页面加载时长），也可以用下面的简化写法，但这种方式在页面加载慢时会让用户多等这段时间，不太推荐：

let loader = document.getElementById("preloader");

window.addEventListener("load", function () {
  setTimeout(() => {
    loader.style.display = "none";
  }, 2000); // 固定延时2秒
});

内容的提问来源于stack exchange，提问作者timventura