您可以使用以下代码。

Question

我有一个加载第三方网站的iframe，加载速度极慢。

是否有一种方法可以显示加载消息，而iframe加载用户却看不到大的空格？

PS。请注意，iframe适用于第三方网站，因此我无法在其网页上修改/注入任何内容。

Answer 1

我做了以下css方法：

 <div class="holds-the-iframe"><iframe here></iframe></div>


 .holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
 }

Answer 2

我认为这会有所帮助：http://jsfiddle.net/UVsdh/

<强> JS：

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

<强> HTML：

<iframe src="http://google.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>

<强> CSS：

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ccc;
    top: 0px;
    left: 0px;
    position: absolute;
}

Answer 3

如果它只是你想要实现的占位符：一种疯狂的方法是将文本作为svg-background注入。它允许一些灵活性，从我读过的浏览器支持应该相当不错（虽然没有经过测试）：

Chrome＆gt; = 27
FireFox＆gt; = 30
Internet Explorer＆gt; = 9
Safari＆gt; = 5.1

HTML：

<iframe class="iframe-placeholder" src=""></iframe>

的CSS：

.iframe-placeholder
{
   background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat;
}

你能改变什么？

在背景值中：

字体大小：查找 font-size =＆＃34;＆＃34; 并将值更改为您想要的任何内容
字体颜色：寻找 fill =＆＃34;＆＃34; 。如果您使用的是十六进制颜色表示法，请不要忘记将＃替换为％23。％23代表URL编码中的＃，这是svg-string能够在FireFox中解析所必需的。
字体系列：查找 font-family =＆＃34;＆＃34; 如果你的字体包含多个单词（比如\ ＆＃39; Lucida Grande \＆＃39;）
text：查找您看到 PLACEHOLDER字符串的文本元素的元素值。您可以将任何符合URL标准的PLACEHOLDER字符串替换（特殊字符需要转换为百分比表示法）

示例：http://jsfiddle.net/8t56Ljw0/

优点：

没有额外的HTML元素
没有js
无需外部程序即可轻松调整文本（...）
它的SVG，因此您可以轻松地将所需的任何SVG放在那里。

缺点：

浏览器支持
很复杂
这是hacky
如果iframe-src没有背景设置，占位符将会闪现（这不是此方法固有的，但只是在iframe上使用bg时的标准行为）

我只会推荐这个，只有在iframe显示文本作为占位符时才需要一点灵活性（多种语言，......）。花一点时间思考一下：这些真的是必要的吗？如果我有选择的话，我会选择@ Christina的方法

Answer 4

$('iframe').load(function(){
      $(".loading").remove();
    alert("iframe is done loading")
}).show();


<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/>
<div class="loading" style="width:600px;height:300px;">iframe loading</div>

Answer 5

以下是大多数情况的快速解决方案：

<强> CSS：

.iframe-loading { 
    background:url(/img/loading.gif) center center no-repeat; 
}

如果您愿意，可以使用动画加载GIF，

<强> HTML：

<div class="iframe-loading">
    <iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

使用onload事件，您可以在iframe中加载源页面后删除加载图像。

如果您不使用jQuery，只需将id放入div并替换这部分代码：

$('.iframe-loading').css('background-image', 'none');

通过以下方式：

document.getElementById("myDivName").style.backgroundImage = "none";

一切顺利！

Answer 6

是的，您可以使用位于iframe区域上方的透明div，并将加载程序gif作为背景。

然后您可以将onload事件附加到iframe ...

 $(document).ready(function() {

   $("iframe#id").load(function() {
      $("#loader-id").hide();
   });
});

祝你好运

Answer 7

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=test@user8.com&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>

Answer 8

您可以按以下方式使用

$('#showFrame').on("load", function () {
        loader.hide();
});

Answer 9

我遵循以下方法

首先，添加同级div

$('<div class="loading"></div>').insertBefore("#Iframe");

然后在iframe完成加载后

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });

Answer 10

您可以使用以下代码。

 iframe {background:url(../images/loader.gif) center center no-repeat; height: 100%;}

如何在加载iFrame时显示加载消息？

10 个答案:

您可以使用以下代码。