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

Posted 2023-03-06

【中文标题】加载 iframe 并更改其源时显示加载符号？

【英文标题】：Show loading symbol when iframe gets loaded AND changes its source?

【发布时间】：2018-01-06 20:27:12

【问题描述】：

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

我用我在这里找到的代码做到了这一点：Show a loading gif while iframe page content loads

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

<style>
#loadImgposition:absolute;z-index:999;
#loadImg divdisplay: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"   scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>

Jay 的代码，view full answer here

【问题讨论】：

制作一个单独的事件，在加载时触发 gif。

在更改 iframe 的源代码之前，请使用此代码 document.getElementById('loadImg').style.display='block';，以便它再次可见。

【参考方案1】：

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

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