如何在加载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(); }); }); 

祝你好运