如何在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文件被加载到索引文件？

您可以附加一个回调负载的功能 – Joey

答

您可以加载页面的显示加载图像，并在完成时隐藏它（使用第二个参数用于添加当请求已完成被称为回调）：

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

很显然，你需要您的文档中的元素与ID loading，如：

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

$（ “＃装载”）显示（ “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不起作用）

答

如果你希望它看起来不错，这里是我使用的解决方案在屏幕上放置模式并在中间加载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="" />

#container是什么？我是否需要制作另一个元素？ – Ilja

#container在我的情况是包含iframe的div elemet，这种方式gif只会显示在iframe中，我是loadig，它适用于我，因为我屏幕中的其他iframe是一个菜单和一个工具栏:)我希望它能帮助你。 –

如何在iframe加载网站时显示加载gif？

相关推荐