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

我有一个加载第三方网站的iframe，加载速度非常慢。如何在加载iFrame时显示加载消息？

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

PS。请注意，iframe是为第三方网站，所以我不能修改/注入他们的网页上的任何东西。

2011-12-24 Jacob

是的，我不知道任何iframes的进展回调......嗯。 – 2011-12-24 20:32:45

124

我也做了以下CSS的方法：

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


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

来源

2013-05-10 15:17:53 Christina

+10

+1不需要JavaScript的优雅解决方案。我喜欢！ – anddoutoi 2014-09-18 12:30:46

这适用于我的情况。一个选择的答案不适合我，因为我只在点击标签时加载了iFrame。但是这个在加载iFrame源代码时显示得非常优雅。但太糟糕了，因为Jacob没有选择这个答案，因为Jacob要求提供jQuery解决方案...... – Sung 2015-01-21 16:07:32

如果您正在加载的iframe具有透明背景，那么这不起作用。 iframe加载后仍然可以看到加载gif！ – Westy92 2015-06-26 15:31:22

是的，你可以使用一个透明的div位于iframe区域，加载器gif只作为背景。

然后你就可以onload事件附加到IFRAME ...

$(document).ready(function() { 

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

好运

来源

2011-12-24 20:31:13 maxijb

我认为这将帮助：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; 
}

来源

2011-12-24 20:33:23

我明白为什么当'load'触发时隐藏'＃loadingMessage'，但为什么你还要将它隐藏在'ready'中？这不是太早吗？ – teedyay 2012-07-25 10:30:45

这取决于用户的需求。如果他在隐藏加载消息之前不需要加载所有图像，则不需要加载回调。 – 2012-07-25 12:55:56

jquery不是“JS”。 – 2015-03-26 15:24:34

$('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>

来源

2011-12-24 20:35:27

对于在第三方网站上加载的iframe，这不一定是一个好的解决方案，因为他们的页面上可能没有jQuery。 – Luke 2017-04-16 18:55:52

如果只有你正在努力实现的占位符：一种疯狂的方法是将文本注入为svg背景。它允许一些flexbility，从我读过的浏览器支持应该是相当不错的（没有测试但它）：

Chrome浏览器> = 27
火狐> = 30
互联网资源管理器> = 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; 
}

你能改变什么？

里面的背景值：

字体大小：寻找字体大小=“”和值更改为任何你想要
字体颜色：寻找填充=“”。如果您使用十六进制颜色表示法，请不要忘记用％23替换＃。％23代表＃中的URL编码，这是svg-string能够在FireFox中解析所必需的。
字体家族：寻找FONT-FAMILY = “”记得逃脱单引号，如果你有一个由多个单词组成（如使用\ '龙力大\'）
文本的字体：查找文本元素的元素值，您将看到PLACEHOLDER字符串。您可以替换任何占位符字符串，URL规范（特殊字符需要转换为百分比表示）

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

优点：

没有额外的HTML-元素
没有js
无需外部程序即可轻松调整文本（...）
这是SVG，所以你可以很容易地把你想要的任何SVG放在那里。

缺点：

浏览器支持
它的复杂
这是哈克
如果iframe的SRC没有背景设定，占位符将彪炳（这是不是这种方法固有的，但只是在iframe上使用bg时的标准行为）

我只会建议这样做，如果绝对有必要在需要一点灵活性（多种语言，...）的iframe中显示文本作为占位符。请花点时间反思一下：这一切真的需要吗？如果我有选择，我会去@克里斯蒂娜的方法

来源

2014-09-12 02:04:06 Pascalculator

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

回答

相关问题