Блог

Главная - Вопросы по программированию - Загрузка анимации при отправке html-формы

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

#html #forms #animation #load

#HTML #формы #Анимация #загрузить

Вопрос:

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

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

Ценю любую информацию по этому поводу.

Комментарии:

1. Да, вы должны использовать JavaScript, по крайней мере, для отображения и скрытия анимации. Но анимация может быть статической gif-анимацией или около того.

Ответ №1:

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

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

и при нажатии отобразите gif, снова превратив его в блок:

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

Ответ №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>