如何利用来自不同页面的加载 gif？

Question

我真的很感激能帮助我解决这个大脑戏弄问题！

• 我们有一个托管在一台服务器上的网站。
• 我们还有一个基于 Web 的应用程序，它托管在不同的服务器上，因为它使用不同的技术 (QlikView)。

我们所做的是通过使用 iFrame 来拉入应用程序，使应用程序看起来就像是网站的一部分。我们用来执行此操作的代码如下所示：

<iframe src="http://www.application_blah.co.uk" width="1190px" height="900px" style="margin: 17px 0 0 -10px; border:none;" scrolling="no" ></iframe>

这很好用。但是该应用程序需要 20 秒才能加载。在此期间，用户会看到网站的页眉和页脚，但除此之外它只是空白。没有任何迹象表明正在发生任何事情或应用程序正在加载。

如果您直接而不是通过 iFram 查看应用程序，它在加载时确实有一个加载 gif，但它位于页面的右上角，因此它完全不在 iFrame 的视图中。加载 gif 出现在 id="InitialLoader" 的 div 中。

我们无法控制应用程序的代码（例如移动加载 gif）。但是我们可以在网站上编辑代码。我想知道是否有可能以某种方式利用该加载符号并显示我们自己的加载符号（或者实际上是相同的符号），只要它在应用程序中可见？

我的一个想法是使用 jQuery .load，但不确定这是否可行？加载符号不会永久显示，仅在加载页面时。我想在特定用户加载它时在我们的网页上显示它。这是我正在考虑的代码示例：

jQuery

    <script>
jQuery(document).ready(function(){
    jQuery("#loading").load('http://www.application_blah.co.uk #InitialLoader');
});
</script>

HTML

<div id="loading"></div>

如果有其他方法，我非常愿意接受建议！最好知道上述是否可行？由于我们的代理机构向我收取费用，我很难在网站上进行测试，所以在提交之前要确定！

非常感谢，

凯蒂

Answer 1

您实际上可以尝试在框架本身中移动 DIV。 DIV“InitialLoader”由 Qlikview 中的 CSS 控制。 可以编辑 CSS 以将 DIV 定位在页面的中心。 然后你可以在“opendoc.htm”中将“Loading...”文本编辑为其他内容。

Answer 2

感谢 John 提供的示例 - 能够在 jsfiddle 上看到它真是太好了！

据我了解，您已经创建了一些代码，当图像完成加载时会显示警报。也许这可以通过一些调整来用于我的目的？我不确定如何。这是我需要实现的目标：

应用程序正在加载时

在加载应用程序时，www.application-blah.co.uk 上的加载 gif 容器 div 如下所示：

<div id="InitialLoader">
<img src="working.gif">
<span class=ctx-menu-text">Loading...</span>
</div>

我希望在 www.application-blah.co.uk 上显示此 div 时，在 www.mysite.com 上显示加载消息。

应用程序完成加载后

应用程序加载后，包含加载 gif 的 div 的样式将更改为 style="display:none"，如下所示。

<div id="InitialLoader" style="display:none">
<img src="working.gif">
<span class=ctx-menu-text">Loading...</span>
</div>

我希望 www.mysite.com 上的加载消息在发生这种情况时消失。

希望这是有道理的！我知道这不是一个理想的场景！

再次感谢！

凯蒂

Answer 3

好的，我相信您遇到的问题是您正在执行以下操作：

1) 您正在加载一个 iframe，其中设置了一个 img 标签...

2) 使用 jquery 询问 img 是否已加载，或者对其应用 onload 属性只会失败，因为标签已被渲染并且 DOM 似乎不支持此逻辑。

我发现的一个选项是在为 img 加载文档后手动设置源（如果可能的话），jFiddle 提供了一个快速示例。

$(document).ready(function(){
    $('img').attr('src', 'http://onerahi.cabu.school.nz/files/2012/09/goes-12-firstimage-large081701.jpg').load(function() { alert('loaded'); });
}
);

http://jsfiddle.net/7E6zQ/

#

好的，获取现有图像并重新制作并使用新的 onload 函数将其添加到 dom 中，我认为这可以实现您的结果，附上新的小提琴。

http://jsfiddle.net/yNGV7/

$('document').ready(function(){
    var newimg = new Image();
    newimg.src = $('img').attr('src');
    newimg.onload = function() {
         //remove loading msg
        $('.ctx-menu-text').remove();

            //hide the div
        $('#InitialLoader').fadeOut(1000);
    }

    $('img').replaceWith(newimg);
});