如何在加载iFrame时显示加载消息?
我有一个加载第三方网站的iframe,加载速度非常慢。如何在加载iFrame时显示加载消息?
有没有一种方法可以显示加载消息,而iframe加载用户没有看到一个大的空白空间?
PS。请注意,iframe是为第三方网站,所以我不能修改/注入他们的网页上的任何东西。
我也做了以下CSS的方法:
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}
是的,你可以使用一个透明的div位于iframe区域,加载器gif只作为背景。
然后你就可以onload事件附加到IFRAME ...
$(document).ready(function() {
$("iframe#id").load(function() {
$("#loader-id").hide();
});
});
好运
我认为这将帮助: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;
}
我明白为什么当'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>
对于在第三方网站上加载的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中显示文本作为占位符。请花点时间反思一下:这一切真的需要吗?如果我有选择,我会去@克里斯蒂娜的方法
是的,我不知道任何iframes的进展回调......嗯。 – 2011-12-24 20:32:45