display loading gif on multi-part form submit

Question

Im пытается отобразить загрузку gif перед отправкой многостраничной формы (загрузка файла), это мой код .. но изображение не отображается .. если я удалю отправку () он отображает, поэтому .. не является проблемой пути или синтаксиса.

$('#btnSubmit').click(function() { 
    document.getElementById('loader').innerHTML = "<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />"; 
    $('#uploadform').submit(); 
}); 

Answer 1

$ ('# грузчиков') HTML = «темы/IMG/loading.gif 'граница ='. 0 '/> ";

Это правильно вставляет загрузочное изображение, хотя если вы не сообщите jQuery о отправке формы с помощью $ .post, вы попадете на новую страницу отправки, чтобы вы не увидели изображение в любом случае.

Answer 2

Если вы используете фактической встроенной отправки формы метод, то это потому, что он начинает загрузку страницы задолго до того, как вы загрузили GIF я подозреваю.

Обычно я использую httprequests для динамического создания контента, поэтому, когда я отправляю новый запрос, я меняю содержимое страницы на загружаемое изображение до тех пор, пока не будет получена новая страница.

Answer 3

Я предполагаю, что проблема заключалась в обращении с изображениями, обрабатываемом apache.

Так что я загружаю изображение в div, чтобы скрыть его.

тогда я показать его из JavaScript:

document.getElementById('loader').style.display = "inline"; 

Работал как шарм;)

Answer 4

Согласен с комментарием Teja. Если вы не выполняете асинхронно, независимо от того, действительно ли отображение gif основано на быстром запуске браузера загрузки следующей страницы (или обратной страницы).

Что вы могли бы сделать, если вы действительно хотите, чтобы показать GIF (придется быть Аяксом некоторых описаний, хотя) является ...

$("#btnSubmit").click(function(e){ 
    e.preventDefault(); // stops any 'immediate' post back or re-direction 
    $("#loader").hide() 
    .html("<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />") 
    .delay(1000).fadeIn(200, function(){ 
     // submit form using $.ajax or whatever suits - rebuild page on callback or navigate to new page 
    }); 
}); 

Вообще говоря, хотя, как и Йонас и Тея сослались на, если вы не делаете ajax - тогда пользовательская обратная связь уже существует (то есть версия браузера «loader gif» будет отображаться, потому что она пытается загрузить новую страницу) - так зачем беспокоиться о том, чтобы обойти дома, чтобы получить загрузчик gif на вашей странице и сделать его «Web 2.0»?

Либо сделайте ajax, либо пусть браузер даст пользователю визуальную обратную связь.