如何在iframe加載網站時顯示加載gif？

我有inc/content.php文件，其中包含帶有src =的iframe到我的域。如何在iframe加載網站時顯示加載gif？

在我index.php的網頁我有按鈕<button id="nextButton" onClick="viewNext();return false;">New</button>點擊它下面的JavaScript函數調用時：

<script type="text/javascript"> 
function viewNext() 
{ 
    $('#content').load('inc/content.php'); 
} 
</script>

函數加載的iframe從inc/content.php文件到index.php頁<div id="content"></div>

我怎樣才能顯示loading.gif形象，同時inc/content.php文件被加載到索引文件？

來源

2011-10-07 Ilja

您可以附加一個回調負載的功能 – Joey

您可以加載頁面的顯示加載圖像，並在完成時隱藏它（使用第二個參數用於添加當請求已完成被稱爲回調）：

$("#loading").show(); 
$("#content").load("inc/content.php", function() { 
    $("#loading").hide(); 
});

很顯然，你需要您的文檔中的元素與ID loading，如：

<img id="loading" src="loading.gif" alt="Loading">

來源

2011-10-07 20:39:30 Lekensteyn

$（「＃裝載」）顯示（「loading.gif」）。我在哪裏放置圖像的路徑？ – Ilja

@IlyaKnaup：添加示例 – Lekensteyn

它在短時間內有效，一旦我點擊按鈕，但不會在iframe加載時停留，以下是我如何使用它http://inelmo.com/stuff單擊「新建」按鈕，然後單擊「新建」按鈕等着瞧。（我沒有使用圖像只是文本說「加載」） – Ilja

<script type="text/javascript"> 
function viewNext() 
{ 
    show_loading() 
    $('#content').load('inc/content.php' , hide_loading); 
} 

function show_loading(){ $('.loading').show() } 
function hide_loading(){ $('.loading').hide() } 
</script>

雖然「裝」是包含loading.gif的div類名。

對於loading.gif圖像，你應該把它變成一個div它可以「浮動」在您的頁面像這樣的中心：

HTMLCODE：

<div style="position:absolute; top:100px; left:50%;" class="loading"> 
    <img src="/img/loading.gif" /> 
</div>

你可以通過改變內聯樣式「top：...; left：....;」來更改加載圖像的顯示位置。如果你想在屏幕上定位加載基地，而不是頁面的位置，然後用position:fixed;代替position:absolute;（儘管這對IE不起作用）

來源

2011-10-07 20:42:00

如果你希望它看起來不錯，這裏是我使用的解決方案在屏幕上放置模式並在中間加載gif的工作。

<script type="text/javascript"> 
function viewNext() 
{ 
    $('#loading').attr('src', 'some_path/loading.gif'); 
    $('#container').block({ message: $('#loading') }); 
    $('#content').load('inc/content.php' , function(){ $('#container').unblock(); }); 
} 
</script>

它使用jquery.blockUI.js，它允許我阻止某個容器，可能是一個div或整個屏幕。

你需要的HTML是這個

<img id="loading" style="display: none;" src="" />

來源

2011-10-07 21:37:13

#container是什麼？我是否需要製作另一個元素？ – Ilja

#container在我的情況是包含iframe的div elemet，這種方式gif只會顯示在iframe中，我是loadig，它適用於我，因爲我屏幕中的其他iframe是一個菜單和一個工具欄:)我希望它能幫助你。 –

如何在iframe加載網站時顯示加載gif？

回答

相關問題