如何在加載iFrame時顯示加載消息？

我有一個加載第三方網站的iframe，加載速度非常慢。如何在加載iFrame時顯示加載消息？

有沒有一種方法可以顯示加載消息，而iframe加載用戶沒有看到一個大的空白空間？

PS。請注意，iframe是爲第三方網站，所以我不能修改/注入他們的網頁上的任何東西。

2011-12-24 Jacob

是的，我不知道任何iframes的進展回調......嗯。 – 2011-12-24 20:32:45

124

我也做了以下CSS的方法：

<div class="holds-the-iframe"><iframe here></iframe></div> 


.holds-the-iframe { 
    background:url(../images/loader.gif) center center no-repeat; 
}

來源

2013-05-10 15:17:53 Christina

+10

+1不需要JavaScript的優雅解決方案。我喜歡！ – anddoutoi 2014-09-18 12:30:46

這適用於我的情況。一個選擇的答案不適合我，因爲我只在點擊標籤時加載了iFrame。但是這個在加載iFrame源代碼時顯示得非常優雅。但太糟糕了，因爲Jacob沒有選擇這個答案，因爲Jacob要求提供jQuery解決方案...... – Sung 2015-01-21 16:07:32

如果您正在加載的iframe具有透明背景，那麼這不起作用。 iframe加載後仍然可以看到加載gif！ – Westy92 2015-06-26 15:31:22

是的，你可以使用一個透明的div位於iframe區域，加載器gif只作爲背景。

然後你就可以onload事件附加到IFRAME ...

$(document).ready(function() { 

    $("iframe#id").load(function() { 
     $("#loader-id").hide(); 
    }); 
});

好運

來源

2011-12-24 20:31:13 maxijb

我認爲這將幫助：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; 
}

來源

2011-12-24 20:33:23

我明白爲什麼當'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>

來源

2011-12-24 20:35:27

對於在第三方網站上加載的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中顯示文本作爲佔位符。請花點時間反思一下：這一切真的需要嗎？如果我有選擇，我會去@克里斯蒂娜的方法

來源

2014-09-12 02:04:06 Pascalculator

如何在加載iFrame時顯示加載消息？

回答

相關問題