Jac*_*cob 90 javascript iframe jquery
我有一个iframe加载第三方网站,加载速度极慢.
有没有办法我可以显示加载消息,而iframe加载用户没有看到一个大的空格？
PS.请注意,iframe是针对第三方网站的,因此我无法在其页面上修改/注入任何内容.
Chr*_*ina 206
我做了以下css方法:
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}
Min*_*hev 30
我认为这会有所帮助: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;
}
ya.*_*eck 16
替代解决方案。
<iframe srcdoc="Loading..." onload="this.removeAttribute('srcdoc')" src="https://example.com"></iframe>
请注意，srcdoc属性可以具有任何 HTML 标记。因此您可以将自定义样式应用于消息。
<iframe id="example" src="https://example.com"></iframe>
<script>
const iframe = document.getElementById('example');
iframe.srcdoc = '<!DOCTYPE html><p style="color: green;">Loading...</p>';
iframe.addEventListener('load', () => iframe.removeAttribute('srcdoc'));
</script>
Pas*_*tor 12
如果它只是你想要实现的占位符:一种疯狂的方法是将文本注入svg-background.它允许一些灵活性,从我读过的浏览器支持应该相当不错(虽然没有测试过):
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编码中的#,这是svg-string能够在FireFox中解析所必需的.
字体系列:查找font-family =""如果你有一个由多个单词组成的字体(比如\'Lucida Grande \',请记得转义单引号)
text:查找您看到PLACEHOLDER字符串的text-element的元素值.您可以将任何符合URL的内容替换为PLACEHOLDER字符串(特殊字符需要转换为百分比表示法)
例如:http://jsfiddle.net/8t56Ljw0/
优点:
缺点:
我只会推荐这个,只要在iframe中显示文本作为占位符是绝对必要的,这需要一点灵活性(多种语言,......).花一点时间思考一下:这一切真的有必要吗？如果我有选择的话,我会选择@ Christina的方法
这是大多数情况下的快速解决方案：
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，只需在 div 中放入一个 id 并替换这部分代码：
$('.iframe-loading').css('background-image', 'none');
通过这样的事情：
document.getElementById("myDivName").style.backgroundImage = "none";
祝一切顺利！
$('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>
| 归档时间： |
|
| 查看次数： |
109206 次 |
| 最近记录： |