affichage chargement gif sur formulaire multi-partie soumettre

Question

Im essayant d'afficher un gif de chargement avant de soumettre un formulaire multipart (téléchargement de fichier), ceci est mon code .. mais l'image ne s'affiche pas .. si je supprime le soumettre () il affiche, donc .. n'est pas un problème de chemin ou de syntaxe.

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

Answer 1

$ ('# chargeur') html = « thèmes/img/loading.gif 'border ='. 0 '/> ";

L'image de chargement sera insérée correctement, mais à moins que vous ne demandiez à jQuery de soumettre le formulaire avec $ .post, vous serez redirigé vers une nouvelle page de soumission afin de ne plus voir l'image.

Answer 2

Si vous utilisez la méthode formulaire builtin réelle soumettre alors il est parce qu'il commence à charger la page longtemps avant que votre gif est chargé je pense.

Habituellement, j'utilise httprequests pour créer du contenu de façon dynamique. Lorsque je soumets une nouvelle requête, je change le contenu de la page en image de chargement jusqu'à ce que la nouvelle page soit reçue.

Answer 3

Je suppose que le problème était la demande d'image gérée par Apache.

Donc, je charge l'image sur le div dans le cacher.

alors je le montrer de javascript:

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

travaillé comme un charme;)

Answer 4

D'accord avec le commentaire de Teja. À moins que vous ne soumettiez l'envoi de manière asynchrone, l'affichage gif dépendra de la rapidité avec laquelle le navigateur commence à charger la page suivante (ou la page postback).

Qu'est-ce que vous pourriez faire si vous voulez vraiment montrer le GIF (devra être ajax une description de bien) est ...

$("#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 
    }); 
}); 

Fondamentalement parlant bien à la fois comme Jonas et Teja ont fait allusion, si vous ne faites pas ajax - alors le feedback de l'utilisateur est déjà là (la version du navigateur d'un 'loader gif' s'affichera parce qu'il essaie de charger une nouvelle page) - alors pourquoi prendre la peine de faire le tour des maisons sur votre page et le faire paraître "Web 2.0"?

Soit faire un ajax, soit laisser le navigateur donner à l'utilisateur son feedback visuel.