我有一个iframe加载第三方网站,这是非常慢的加载。
有没有办法在iframe加载用户看不到大空格的情况下显示加载中的消息?
注意,是给第三方网站的,所以我不能在他们的页面上修改/注入任何东西。
发布于 2013-05-10 23:17:54
我做了以下css方法:
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}
发布于 2011-12-25 04:33:23
我认为this code会有所帮助:
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;
}
发布于 2014-09-12 10:04:07
如果它只是您试图实现的占位符:一种疯狂的方法是将文本作为svg-background注入。它允许一定的灵活性,根据我所读到的,浏览器的支持应该是相当不错的(虽然还没有测试过):
<代码>F29
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;
}
你能改变什么?
background-value内部:
优点:
没有额外的HTML-elements
缺点:
<代码>F250
只有当绝对有必要将文本显示为iframe中的占位符时,我才会建议您这样做,这需要一点灵活性(多语言,...)。花点时间反省一下:这一切真的有必要吗?如果我可以选择,我会选择@Christina的方法
https://stackoverflow.com/questions/8626638
复制相似问题