在页面加载时显示加载 GIF - Iframe？答案

【问题标题】：Display Loading GIF on page load - Iframe?在页面加载时显示加载 GIF - Iframe？
【发布时间】：2012-01-03 12:34:07
【问题描述】：

我正在将一个 IFrame 加载到一个站点中，该 IFrame 包含一个包含一长串动态数据的页面。加载需要几秒钟，具体取决于宽带速度，并且由于设置需要进行 iframe。

我想显示一个正在加载的 GIF，以便用户知道发生了什么事，但我正在努力让它在父页面容器或 iframed 页面内内容周围的 div 中显示为背景图像。

【问题讨论】：

请粘贴您的代码，您是如何使用 GIF 图像的 ..

标签： javascript jquery iframe

【解决方案1】：

<head>

<script>
    var foo = function(){
      var a = document.getElementById('content');
      var b = document.getElementById('loading_img');
      a.style.top='';
      a.style.left='';
      a.style.position='';
      b.style.display='none';
    };
    </script>
    </head>

    <body onload="foo();">
    <img id="loading_img" style="display:block;margin:20px auto;" src="loading.gif" />
    <div id="content" style="position:absolute;left:-8000px;top:-20000px;">
    .. table .. and stuff
    </div>
    </body>

未经测试，但应该可以工作:)

【讨论】：

【解决方案2】：

您可以将图像添加为 iframe 内 body 元素的背景，位置靠近顶部并居中。例如。 background-position: center 30px

表格渲染开始时，图像会重叠，因此甚至不需要通过javascript将其删除。

【讨论】：