【问题标题】: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');
      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-02-27
        • 2016-01-06
        • 2017-05-26
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多