如何在带有 <frameset> 的页面上显示页面加载 GIF？答案

【问题标题】：How to display page loading GIF on page with <frameset>?如何在带有 <frameset> 的页面上显示页面加载 GIF？
【发布时间】：2013-12-12 15:16:39
【问题描述】：

在这种情况下，我有两个 HTML 页面（就说两个）命名为 index.html 和 list.html

index.html

<html>
<head>
    <title>Frame</title>
</head>
<frameset rows="20%,80%" bordercolor='blue' noresize id="judul">
    <frame src="Judul.html" id="atas">
    <frameset cols="15%,85%" id="kolom">
        <frame src="list.html" id="daftar">
        <frame src="new 2.html" id="tengah">
    </frameset>
</frameset>
</html>

list.html

<html>
<head>
    <title>List</title>
</head>
<body>
    <a href="welcome.html" target="tengah" style="color:blue;margin-left:40px;font-family:Segoe UI;">Main page</a>
    <a href="list.html" target="tengah" style="color:blue;margin-left:40px;font-family:Segoe UI;">About Us</a>
</body>
</html>

所以我想要的是当来自 list.html 的链接调用页面时，目标框架将显示加载 GIF，然后在加载完成时将其隐藏。

问题是我应该放什么代码？我应该把它放在哪里？

请尽可能详细，因为我对 HTML 很陌生，而且它的东西

感谢所有建议

【问题讨论】：

好的，我们希望看到您为实现这一效果所做的努力。但首先，框架集已经过时。你应该避免它们。想想 JS 在页面上追加和删除 <img>。
90 年代伟大的画框你已经看不够了，这对你去老学校有好处，但对你未来的用户来说是悲伤的一天。
使用 AJAX 而不是框架。
嗯，这是我现在能做的最好的了，对不起，我以前从未接触过 HTML
买一本关于现代网页设计的书。重复设计师在 15 年前没有更好的选择时所犯的错误并不是一种很好的学习方式。

标签： javascript jquery html animation jquery-animate

【解决方案1】：

最好的方法仍然是 CSS 或 Jquery，因为框架集已被弃用......

示例 CSS，使用 :hover 修饰符（假设您有 onhover 触发功能）：

.myloading_gif {
    display: none:
}

.myloading_gif:hover {
    display: block:
}

如果它是一个点击元素，你不能用 CSS 解决它，那么你应该考虑 JQuery：

$("#myHrefID").click(function() {
    $("#myLoadingIcon").toggle();
});

加载完成后，只需再次调用“toggle”即可。

$("#myLoadingIcon").toggle();

有很多方法可以实现这一点。我的例子应该只是有点帮助，因为我不能 100% 确定我明白了你的意思。

【讨论】：

hi @steini 不管怎样，您能否提供您认为适合您的解决方案的演示（jsfiddle 或 plunkr）？