Загрузка анимации при отправке html формы - PullRequest
Новая
       23

Загрузка анимации при отправке html формы

0 голосов
/ 11 июня 2011

Мне сложнее всего найти информацию о том, что кажется очень простым элементом.

По сути, у меня есть 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 и Amazon здесь являются примерами.На моем сайте это страницы, загрузка которых занимает некоторое время, поэтому я хочу показать посетителям, что активность происходит после того, как они нажали «Перейти».

Примите во внимание любое понимание этого вопроса.

Ответы [ 2 ]

3 голосов
/ 11 июня 2011

Просто добавьте тег <img> со стилем отображения, установленным как "none": 

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

и при щелчке отобразите gif, сделав его снова блоком: 

document.getElementById('loadingGif').style.display = "block";
1 голос
/ 11 июня 2011

Вы можете загрузить изображение загрузки с помощью 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>
...