Question

我最难找到关于什么似乎是一个非常简单的元素的信息。

基本上，我有一个带有下拉列表的html表单。单击“开始”后，我希望表单或页面显示加载gif动画，直到出现下一页。

我必须使用javascript吗？可以这样做吗？

这是我正在使用的表单代码：

<form name="form1">
<select style="width:200px;font-size:14px;color:#764813;font-family:verdana;background-color:#ffffff;" name="menu">
<option value="http://www.google.com">google</option>
<option value="http://www.amazon.com">amazon</option>
</select>
<input style="font-size:14px;color:#ffffff;font-family:verdana;background-color:#ff8800;" type="button" onClick="location=document.form1.menu.options[document.form1.menu.selectedIndex].value;" value="Go">

Google和亚马逊的选项就是例子。在我的网站上，他们是需要一段时间才能加载的页面，所以我想向访问者显示他们点击“开始”后活动正在发生。

欣赏对此的任何见解。

Answer 1

只需添加<img>标记，并将显示样式设置为“无”：

<img src="yourgifanimation.gif" style="display:none" id="loadingGif">

并在点击后再次显示gif：

document.getElementById('loadingGif').style.display = "block";

Answer 2

您可以使用以下Javascript加载加载图片：

 <form name="form1">
    <select style="width:200px;font-size:14px;color:#764813;font-family:verdana;background-color:#ffffff;" name="menu">
    <option value="http://www.google.com">google</option>
    <option value="http://www.amazon.com">amazon</option>
    </select>
    <input style="font-size:14px;color:#ffffff;font-family:verdana;background-color:#ff8800;" type="button" onClick="document.getElementById('loading').innerHTML = "Redirecting...<img src=\"loading.gif\"/>";location=document.form1.menu.options[document.form1.menu.selectedIndex].value;" value="Go">
<span id="loading"></span>

加载动画在html表单上提交

2 个答案: