如何在 iframe 完全加载之前显示繁忙的光标？答案

【问题标题】：How to show busy cursor untill the iframe loads completly?如何在 iframe 完全加载之前显示繁忙的光标？
【发布时间】：2011-12-05 13:53:52
【问题描述】：

我有以下代码。

 <html>
     <body>
      <div>
        <iframe> 
          <html>
           <body>
                content
           </body>
         </html>
        </iframe>
      </div>
     </body>
    </html>

我想在 iframe 的内容完全加载之前显示等待光标。我可以控制这两个 html。

【问题讨论】：

标签： javascript jquery

【解决方案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');
});

【讨论】：