如何在 iframe 完全加载之前显示繁忙的光标？
Posted
技术标签:
【中文标题】如何在 iframe 完全加载之前显示繁忙的光标？【英文标题】：How to show busy cursor untill the iframe loads completly? 【发布时间】：2011-12-05 13:53:52 【问题描述】：我有以下代码。
<html>
<body>
<div>
<iframe>
<html>
<body>
content
</body>
</html>
</iframe>
</div>
</body>
</html>
我想在 iframe 的内容完全加载之前显示等待光标。 我可以控制这两个 html。
【问题讨论】：
【参考方案1】：您可以编写一个简单的函数来更改正文（或其他）的光标：
$('body').css('cursor', 'pointer');
虽然我不确定你是否可以让 iframe onload 在所有浏览器上正常工作。
$("#iFrameId").load(function ()
// do something once the iframe is loaded (disable busy cursor, etc)
);
检查以下 SO 问题 => How do I fire an event when a iframe has finished loading in jQuery?
【讨论】：
忙碌图标的名字是wait。光标：等待；【参考方案2】：通常，当我实现这个时，我用一个静态 HTML 文件填充 iframe，其中有 ajax 加载器光标。然后我使用 jquery 来更改 IFRAME 的源（src 标签）。然后最终结果是当浏览器加载下一页时，您会看到一个加载对话框。
不过，这取决于您对框架代码的实现。如果它只是一个大页面加载并且您在后台加载了javascript，那么最好将图像放在同一页面上，然后在文档“准备好”时简单地隐藏它。使用 jquery 很容易做到这一点。
【讨论】：
【参考方案3】：如果您的 iFrame 在页面加载开始时加载，则使用：
$(document).ready(function ()
$('body').css('cursor', 'wait');
);
并使用 iframe 的 onload 函数将光标变回：
$('#iFrameID').on('load', function ()
$('body').css('cursor', 'default');
);
【讨论】：
以上是关于如何在 iframe 完全加载之前显示繁忙的光标？的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS：如何在页面完全加载之前显示预加载或加载？
如何在 onClick 函数中将繁忙的光标添加到 reactstrap 模态按钮。该功能是一个承诺