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

Question

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

我用我在这里找到的代码做到了这一点：在 iframe 页面内容加载时显示加载 gif

这行得通。但是在我的网站上，我有复选框和单选按钮。当用户单击其中一个时，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>

来自周杰伦的代码，在此处查看完整答案

Answer 1

我还没有测试过这个，但据我所知，每当重新加载 iframe 时，jQuery on("load"( 事件就会触发。因此，不要使用 onload 作为属性，而是使用以下命令：

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