如何让JavaScript提示弹窗在页面完全加载可见后再弹出？

你现有代码存在两个核心问题：

1. 弹窗逻辑直接写在顶层作用域，JS执行时会阻塞页面渲染，导致alert在页面未完成绘制时就弹出
2. 无用户名分支存在语法错误：txt == "No name provided"是相等判断语句，并非变量赋值，会触发txt未定义的报错

方案1：等待页面所有资源完全加载后弹窗 #

如果需要等页面内所有图片、样式、外部资源全部加载完成、内容完全渲染可见后再弹出提示，监听window的load事件即可，修正后代码如下：

// 等页面所有资源加载完成后执行逻辑
window.addEventListener('load', function() {
  let txt;
  if (name == null || name == "") {
    // 注意这里是单等号赋值，不是双等号判断
    txt = "No name provided";
  } else {
    txt = "Hello, " + name + "! How are you today?";
  }
  alert(txt);
})

方案2：等待DOM结构解析完成后弹窗 #

如果不需要等待图片、字体等外部资源加载，只要页面DOM结构渲染完成、主体内容可见就弹窗（触发时机更早，用户等待时间更短），可以监听document的DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
  let txt;
  if (name == null || name == "") {
    txt = "No name provided";
  } else {
    txt = "Hello, " + name + "! How are you today?";
  }
  alert(txt);
})

注意：如果你的JS代码是写在</body>标签的最末尾位置，本身就会在DOM解析完成后执行，这种情况只需要修正双等号的语法错误即可，不需要额外绑定事件。

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