如何在body加载后或图片弹出后延迟加载指定div？

没问题，这两个需求都可以用 JavaScript 结合定时器轻松实现，我结合你提到的 visibility:hidden 方案，给你分场景写具体的实现示例：

一、页面<body>加载完成后延迟加载<div> #

这里要区分两种页面加载完成的时机：

• DOMContentLoaded：当页面的DOM结构完全加载完成（不等待图片、样式表等外部资源）就触发，适合大部分场景
• window.onload：当页面所有资源（包括图片、样式）都加载完成后才触发

你可以根据需求选择，示例代码如下：

HTML 结构 #

<body>
  <!-- 其他页面内容 -->
  <div id="delayed-div" style="visibility:hidden;">我是延迟加载的div</div>
</body>

JavaScript 实现 #

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
  // 设置3秒延迟（单位是毫秒，3000=3秒）
  setTimeout(function() {
    const delayedDiv = document.getElementById('delayed-div');
    delayedDiv.style.visibility = 'visible';
  }, 3000);
});

如果需要等待所有资源加载完再延迟，就把DOMContentLoaded换成window.onload：

window.onload = function() {
  setTimeout(function() {
    document.getElementById('delayed-div').style.visibility = 'visible';
  }, 3000);
};

二、图片弹出后延迟加载text-container #

首先得明确“图片弹出”的触发逻辑——比如是点击按钮弹出图片、还是图片加载完成后自动弹出？我给你写两种常见场景的实现：

场景1：点击按钮弹出图片后，延迟显示text-container #

HTML 结构

<button id="show-img-btn">弹出图片</button>
<img id="popup-img" src="your-image-url.jpg" style="visibility:hidden; max-width:300px;">
<div id="text-container" style="visibility:hidden; margin-top:20px;">我是图片弹出后延迟显示的文本容器</div>

JavaScript 实现

const showImgBtn = document.getElementById('show-img-btn');
const popupImg = document.getElementById('popup-img');
const textContainer = document.getElementById('text-container');

showImgBtn.addEventListener('click', function() {
  // 先显示图片（弹出）
  popupImg.style.visibility = 'visible';
  // 设置2秒延迟后显示text-container（可自行调整毫秒数）
  setTimeout(function() {
    textContainer.style.visibility = 'visible';
  }, 2000);
});

场景2：图片加载完成后自动弹出，再延迟显示text-container #

HTML 结构

<img id="popup-img" src="your-image-url.jpg" style="visibility:hidden; max-width:300px;">
<div id="text-container" style="visibility:hidden; margin-top:20px;">我是图片弹出后延迟显示的文本容器</div>

JavaScript 实现

const popupImg = document.getElementById('popup-img');
const textContainer = document.getElementById('text-container');

// 监听图片加载完成事件
popupImg.addEventListener('load', function() {
  // 图片加载完成后，先显示图片（弹出）
  popupImg.style.visibility = 'visible';
  // 设置3秒延迟后显示text-container
  setTimeout(function() {
    textContainer.style.visibility = 'visible';
  }, 3000);
});

// 处理图片加载失败的情况（可选）
popupImg.addEventListener('error', function() {
  console.log('图片加载失败');
});

补充说明 #

如果你觉得visibility:hidden会占用页面空间（即使隐藏也占位置），可以换成display:none，显示时改成display:block（或对应布局的display值，比如flex），两种方式按需选择即可。

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