使用图像加载预加载 DIV

Posted 2023-05-07

【中文标题】使用图像加载预加载 DIV

【英文标题】：Preloading a DIV with image loading

【发布时间】：2011-08-25 07:05:37

【问题描述】：

我有问题。我正在开发一个 CMS，它的名字是 Dolphin。简而言之，我创建了一个包含大量代码（jQuery、javascript、php、html、图像...等）的块。 我想要做的是显示加载图像，直到该块的内容完全加载。所以即使看起来很奇怪，我也需要一个 DIV 的预加载函数。我需要这样做，因为如果我不使用它，我可以看到 div 组成缓慢，这太可怕了。你知道一个很好的 jQuery 或 javascript 函数可以帮助我吗？只是在 DIV 的中心加载图像，直到其内容完全加载。加载后立即显示..谢谢！

【参考方案1】：

诀窍是默认隐藏真正的 div 并在其上方放置“请稍候” div。在繁重的编码末尾添加一行隐藏“请稍候” div 并显示真实的。

所需 HTML 的示例代码：

<div id="pnlPleaseWait">
   Loading please wait...
<div>
<div id="pnlMain" style="display: none;">
   ....heavy stuff going on here...
   ....heavy stuff going on here...
   ....heavy stuff going on here...
</div>

以及 jQuery 结尾的重处理行：

$("#pnlPleaseWait").hide();
$("#pnlMain").show();

【讨论】：

图片是否加载到具有display:none 的块中？如果他们不这样做，您也可以将其放置在屏幕外，并在完成后更改位置。

@jeroen 好问题！猜猜那个简单的图片预加载（例如var img = new Image(); img.src = "myImage.jpg"; 是安全的方式。:-)

【参考方案2】：

检查其他问题：

How to show loading spinner in jQuery?

How do I display an animated image during Page Load using jQuery

等等