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出现在一个div中，其id =＆＃34; InitialLoader＆＃34;。

我们无法控制应用程序的代码（例如移动加载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

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

1）您正在加载一个iframe标签，其中包含所有已准备好的img标签...

2）如果img已加载，或者对它应用onload属性，则询问jquery只会因为标记已经全部呈现而失败，并且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);
});

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.mysite.com上显示加载消息，而这个div可以在www.application-blah.co.uk上看到。

应用程序加载完成后

加载应用程序后，包含加载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

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

如何利用其他页面中的加载gif？

3 个答案: