如何使用CSS和JQuery实现页面内容延迟显示？

• 核心逻辑：先将目标内容设置为隐藏状态，等页面DOM加载完成后，通过定时器延迟3秒再将其显示出来。

具体实现代码示例 #

1. 给需要延迟显示的区块添加隐藏样式

/* 初始隐藏目标内容 */
.delayed-block {
  display: none;
}

2. 添加JavaScript实现延迟显示

方式一：监听DOM加载完成事件（推荐）

// 等待页面DOM结构加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 延迟3000毫秒（3秒）显示内容
  setTimeout(function() {
    // 选中目标区块并修改显示状态
    document.querySelector('.delayed-block').style.display = 'block';
    // 若目标是行内元素，可改为 inline 或 inline-block
  }, 3000);
});

方式二：将脚本放在页面底部（无需监听事件）

<!-- 把脚本放在</body>标签前，确保DOM已加载 -->
<script>
  setTimeout(function() {
    document.querySelector('.delayed-block').style.display = 'block';
  }, 3000);
</script>
</body>

常见失效原因排查 #

• 未给目标区块添加初始隐藏样式，或样式被其他高优先级CSS规则覆盖
• 脚本执行过早（比如放在<head>里且未加DOM加载监听），导致无法找到目标元素
• setTimeout的时间参数写错（需传入毫秒值，3秒对应3000）
• 元素选择器错误（比如ID/类名拼写错误，选择器语法错误）

内容的提问来源于stack exchange，提问作者New Developer 2021