11548 sujets

JavaScript, DOM et API Web HTML5

Attribut display sur Chrome, IE et Safari

Bonjour,

Sur mon appli web la plupart des traitements passent en ajax, j'aimerais donc qu'à chaque chargement une barre de chargement s'affiche.

La solution théorique : J'ai donc un div qui récupère les dimension de la fenêtre et qui recouvre toute l'appli. Ce div contient un gif pour le chargement. A chaque entrée dans la fonction js qui traite mes appels ajax j'affiche ce div à l'aide de :
document.getElementById('chargement').style.display = 'block';

et je le cache en sortant à l'aide de :
document.getElementById('chargement').style.display = 'none';


Le problème : Cette solution fonctionne parfaitement sous Firefox et opera, elle ne fonctionne pas sous IE, Chrome et Safari.

Je n'arrive pas à trouver pourquoi, une idée ?

La partie js qui génère le div :

<body>
<!-- Ma page -->

<script type="text/javascript">
lrgec = screen.availWidth;
htec = screen.availHeight;
			
if ( typeof( window.innerWidth ) == 'number' ) {
	htec = window.innerHeight;
} else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
	htec = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
	htec = document.body.clientHeight;
}
document.write("<div id=\"chargement\" style=\"width:"+ lrgec +"px; height:"+ htec +"px;\"><img src='./img/ajax-loader.gif' /><\/div>");
</script>

</body>
</html>


et le css qui complète :

#chargement{display: none; position: absolute; left: 0; top: 0; z-index: 100; background: transparent url(../img/overlay.png) repeat;}
#chargement img{margin-left: 40%; margin-top: 35%;}


Je précise tout de même que ce div s'affiche bien sur tous les navigateurs lorsque je le met en display: block; directement.
Modifié par Shawn (13 Jul 2010 - 11:24)
J'apporte quelques précisions en esperant que quelqu'un puisse me répondre.

J'ai continué de chercher sans trouver de solution, je ne vois pas ce qui bloque, je n'ai aucune erreur js de générée et le principe me parait correct. Le seule moment ou s'affiche mon div de chargement c'est lorsque que j'ai une autre erreur dans le js qui provoque son arret. C'est donc comme si l'instruction fonctionnait mais que le div n'avait pas le temps de s'afficher, alors que le chargement peut prendre jusqu'à 5 secondes..
Bonjour,

Tu as vérifié que ton élément est bien dimensionné au chargement de la page? Même s'il est en display:none, il doit avoir des dimensions fixées au chargement de la page (le bout de code que tu nous montres). Est-ce que tu as vérifié que cette partie marche bien (via Web Inspector et les IE Developer Tools)?

Par ailleurs: page en ligne?
Bonjour,

Tout d'abord merci d'avoir pris le temps de me répondre !

Pour ce qui est des dimensions elles semblent correctes, si je mets display: block; directement le div s'affiche et recouvre bien toute ma page comme prévu.

Pour ce qui est de la page il s'agit d'une appli' pour une entreprise, je n'ai donc pas la possibilité de mettre de lien vers celle-ci (ce qui va certainement compliquer la tache Smiley smile ).

Aucun test avec Web Inspector ou Ie Developer Tools, je m'y mets tout de suite avec ce dernier. En revanche je n'ai aucun plantage de script détecté sous firebug.
Modifié par Shawn (16 Jul 2010 - 09:39)
Shawn a écrit :
En revanche je n'ai aucun plantage de script détecté sous firebug.

Bah oui, mais si ça marche dans Firefox c'est assez logique. Vu que ça ne marche pas dans Safari/Chrome et dans Internet Explorer, c'est dans ces derniers qu'il faut vérifier si tu n'as pas d'erreurs JavaScript. Via Web Inspector et les IE Developer Tools.
J'ai bien compris, jtrouvais juste cela utile de le préciser, des fois que... bref jsuis en train de faire des tests mais pour l'instant aucune erreur de trouvée.

Edit: Bon ca progresse, je ne pense pas que le problème vienne réellement de ma méthode, en faisant ceci :
document.getElementById('chargement').style.display = 'none';
alert('ok');

Je remarque deux comportements différents :

- Firefox et opera : j'ai un petit temps avant que l'alert ne s'affiche, temps pendant lequel j'ai donc mon animation
- IE, chrome, safari : l'affichage du message est quasi-instantané.

Mon problème vient donc peut-être plus de la manière dont les requêtes sont traitées par les navigateurs non ?

Et mes différents tests avec Web inspector et developer kit ne m'ont rien révélés de nouveau.
Modifié par Shawn (16 Jul 2010 - 10:36)
Salut Shawn !

J'ai actuellement le même problème que toi, et après une batterie de test, je pense savoir d'où ça vient :

Firefox et Opéra effectuent le changement de display dès qu'il arrive.
Chrome, IE et Safari attendent d'avoir finit leur chargement avant d'effectuer ce changement. Donc une fois qu'il a finit son chargement, il affiche ton layers (display = block) et le masque tout de suite (display = none) vu que la page a fini de charger, ce qui fait que tu ne le vois pas.
(pour t'en rendre compte, enlève ton (display=none), et tu verras ton layers chargement apparaitre à la fin du chargement de ta page)

Il faudrait donc forcer ces navigateurs à effectuer le (display = block) avant de se lancer dans le traitement de la fonction.

Donc si quelqu'un sait comment gérer les priorités javascript... je suis preneur Smiley smile
Un début d'élément de réponse à mon problème : séparer la fonction qu'on veut exécuter de la fonction qui affiche le chargement, lancer les deux simultanément avec un setTimeout sur ta fonction (avec un onclick="fonction_load();setTimeout(fonction_X, 100)" par exemple).

Cette méthode marche et affiche l'image au chargement (c'est déjà pas mal !).

Seul problème : Safari, Chrome et IE interrompent l'exécution des .gif pendant le temps de chargement de la page (qu'ils soient dans le bloc de chargement ou tout simplement sur la page), ce qui tue un peu l'effet de chargement...

Si quelqu'un a une idée ? Smiley lol
Sujet clos
Aller à