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

107

我有一个iframe可以加载第三方网站，但加载速度非常慢。

有没有一种方法可以在iframe加载时显示加载消息，而用户看不到较大的空白？

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

javascript  jquery  iframe 
— 雅各布
source
是的，我不知道iframe的任何进度回调...嗯。
— Jeffrey Sweeney

Answers:

231

我已完成以下CSS方法：

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

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}
— 克里斯蒂娜（Christina）
source
1
这对我的情况来说是完美的。选择的一个答案对我不起作用，因为仅在单击选项卡时才加载iFrame。但是，此文件在加载iFrame源文件时显示优美。但是很遗憾，这没有被选择作为答案，因为雅各布要求使用jQuery解决方案...
— dance2die 2015年
21
如果您要加载的iframe具有透明背景，则此方法将无法正常工作。iframe加载后，您仍然可以看到加载的gif！
— Westy92 2015年
3
@Christna此技巧不适用于IE-11。有没有骇客？
— mmuzahid
3
使用iframe onload功能，您可以删除CSS背景图片。
— 雨果·考克斯
1
好答案。有用。您还最好增加一些高度，以便可以轻松看到装载机。
— 拉兹
33

我认为这段代码会有所帮助：

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;
}
— 敏科·格切夫（Minko Gechev）
source
我了解为什么#loadingMessage在load火灾时您会躲藏起来，但是为什么还要隐藏它ready呢？那还为时过早吗？
— teedyay'7
1
这取决于用户的需求。如果他在隐藏加载消息之前不需要加载所有图像，则将不需要on回调。
— Minko Gechev 2012年
9
jQuery不是“ JS”。
— OZ_ 2015年
5
@OZ_并不难通过使用addEventListener和使用querySelector+ styles属性将上述代码转换为原始javascript :-)。除此之外，问题的作者已将标签标记为jquery。无法理解为什么收到您的消息？:-)
— Minko Gechev 2015年
17

如果它只是一个占位符，则您要尝试实现：一种疯狂的方法是将文本作为svg背景注入。它具有一定的灵活性，从我阅读的内容来看，浏览器的支持应该相当不错（尽管还没有对其进行测试）：

  • 铬> = 27
  • 火狐> = 30
  • Internet Explorer> = 9
  • Safari> = 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 =“”并将值更改为所需的任何值

  • 字体颜色：寻找fill =“”。如果您使用的是十六进制颜色表示法，请不要忘记用％23替换＃。％23代表URL编码中的＃，它是在FireFox中能够解析svg字符串所必需的。

  • 字体家族：寻找font-family =“”如果您的字体包含多个单词，请记住不要使用单引号（例如\'Lucida Grande \'）

  • text：在您看到PLACEHOLDER字符串的位置，查找text-element的元素值。您可以使用符合url的任何内容替换PLACEHOLDER字符串（特殊字符需要转换为百分比符号）

小提琴上的例子

优点：

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

缺点：

  • 浏览器支持
  • 很复杂
  • 太过分了
  • 如果iframe-src没有设置背景，则占位符会发光（这不是此方法固有的，而是在iframe上使用bg时的标准行为）

仅在绝对需要在iframe中将文本显示为占位符并且需要一点灵活性（多种语言，...）时，我才建议这样做。请花点时间思考一下：这真的必要吗？如果可以选择的话，我会选择@Christina的方法

— 钙化剂
source
5 
$('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>
— 盐Har
source
对于正在第三方网站上加载的iframe，这不一定是一个好的解决方案，因为他们的页面上可能没有jQuery。
— 路加福音
4

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

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";

祝一切顺利！

— 戴维·托莱多
source
2

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

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

 $(document).ready(function() {

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

我遵循以下方法

首先，添加同级div

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

然后在iframe完成加载后

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });
— 高拉夫
source
0 
<!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>
— 罗米
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.