加载iframe时显示加载符号并更改其来源?

时间:2017-07-31 10:07:33

标签: javascript jquery css iframe

我想在加载iframe时显示loading.gif。

我使用我在此处找到的代码执行了此操作:Show a loading gif while iframe page content loads

这很有效。但在我的网站上,我有复选框和单选按钮。当用户点击其中一个时,iframe会更改其来源并刷新。问题是,加载符号仅在整个页面加载时可见,而不是在iframe更改其来源并获得刷新时。我该如何解决这个问题?

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
来自Jay的代码,view full answer here

1 个答案:

答案 0 :(得分:1)

我没有测试过这个,但据我所知,只要重新加载iframe,就会触发jQuery on(“load”)事件。因此,不要将onload用作属性,而是使用:

$("#frameId").on("load", function () {
    console.log("reloaded"); // Here you can display the loading.gif file
})