如何在加载iFrame时显示加载消息？
我有一个加载第三方网站的iframe加载速度非常缓慢。
有没有办法，我可以显示一个加载消息，而iframe加载用户没有看到一个大的空白？
PS。 请注意，iframe是为第三方网站，所以我不能修改/注入他们的网页上的任何东西。
我做了以下的CSS方法：
<div class="holds-the-iframe"><iframe here></iframe></div> .holds-the-iframe { background:url(..http://img.dovov.comloader.gif) center center no-repeat; } 我认为这将有助于： 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; }
$('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>
如果它只是一个你想要实现的占位符：一个疯狂的方法是注入文本作为SVG背景。 它允许一些灵活性，从我读过的浏览器支持应该是相当体面的（虽然没有testing过）：
- Chrome> = 27
- FireFox> = 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 =“”并将值更改为任何你想要的
-
字体颜色：寻找填充=“” 。 如果您使用hex颜色表示法，请不要忘记用％23replace＃。 ％23代表URL中的编码，这是svgstring能够在FireFox中parsing所必需的。
-
字体家族：寻找font-family =“”如果你有一个由多个单词组成的字体（比如“Lucida Grande”），请记住要避免使用单引号。
-
text：查看PLACEHOLDERstring的文本元素的元素值。 您可以将PLACEHOLDERstringreplace为符合url的任何内容（需要将特殊字符转换为百分比符号）
例如： http : //jsfiddle.net/8t56Ljw0/
优点：
- 没有额外的HTML元素
- 没有js
- 文本可以很容易（…）进行调整，无需外部程序
- 这是SVG，所以你可以很容易地把你想要的任何SVG放在那里。
缺点：
- 浏览器支持
- 这很复杂
- 这是哈克
- 如果iframe-src没有背景设置，占位符将会发光（这不是本方法固有的，而只是在iframe上使用bg时的标准行为）
我只会build议这只有当绝对必要显示文本作为占位符需要一点灵活性（多语言，…）的iframe。 请花点时间反思一下：这一切真的有必要吗？ 如果我有select的话，我会select@克里斯蒂娜的方法
是的，你可以使用一个透明的div放置在iframe区域，加载器gif只作为背景。
然后你可以附加一个onload事件到iframe中…
$(document).ready(function() { $("iframe#id").load(function() { $("#loader-id").hide(); }); });
祝你好运
