J'ai eu ce même problème, commun également à d'autres borwsers comme Firefox. Enfin, j'ai découvert que créer dynamiquement un élément avec un gif animé à l'intérieur lors de la soumission du formulaire ne s'animait pas, j'ai donc développé le workaorund suivant.
1) À document.ready()
, chaque FORM trouvé dans la page, reçoit la position:relative
propriété puis à chacun est attaché un invisibleDIV.bg-overlay
.
2) Après cela, en supposant que chaque valeur de soumission de mon site Web est identifiée par la btn-primary
classe css, encore une fois document.ready()
, je cherche ces boutons, je passe au parent FORM de chacun, et à la soumission du formulaire, je déclenche la showOverlayOnFormExecution(this,true);
fonction, en passant le bouton cliqué et un booléen qui active la visibilité de DIV.bg-overlay
.
$(document).ready(function() {
//Append LOADING image to all forms
$('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');
//At form submit, fires a specific function
$('form .btn-primary').closest('form').submit(function (e) {
showOverlayOnFormExecution(this,true);
});
});
CSS pour DIV.bg-overlay
est le suivant:
.bg-overlay
{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:rgba(255,255,255,0.6);
z-index:100;
}
.bg-overlay img
{
position:absolute;
left:50%;
top:50%;
margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
margin-top:-40px;
max-width:auto;
max-height:80px;
}
3) À toute soumission de formulaire, la fonction suivante est déclenchée pour afficher une superposition d'arrière-plan semi-blanc partout (qui refuse la possibilité d'interagir à nouveau avec le formulaire) et un gif animé à l'intérieur (qui montre visuellement une action de chargement).
function showOverlayOnFormExecution(clicked_button, showOrNot)
{
if(showOrNot == 1)
{
//Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button
$(clicked_button).closest('form').find('.bg-overlay').show();
}
else
$('form .bg-overlay').hide();
}
L'affichage du gif animé lors de l'envoi du formulaire, au lieu de l'ajouter à cet événement, résout le problème de «gel de l'animation gif» de divers navigateurs (comme dit, j'ai trouvé ce problème dans IE et Firefox, pas dans Chrome)