11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Afficher un DIV au premier plan

Bonjour

Question à priori très simple, mais voilà, ça se complique.
Je cherche à adapter le script d'un certain "Simon Willison" qui consiste à afficher un DIV avec un simple message "Veuillez patienter" pendant le chargement de la page.

Le script fonctionne parfaitement, même après l'avoir adapté, mais le problème c'est qu'il se trouve tout en dessous mes autres DIV.
Le chargement est donc apparent.

J'ai modifié le Z-index, mais là, il ne s'efface plus à la fin.
En farfouillant dans le JavaScript j'ai pu observer :
document.getElementByClass("loading").style.display="none";
Tiens tiens, si on rajoutai Z-index="1000" ou "0".
Rien à faire, ça ne fonctionne plus dutout. Smiley confused

Si donc vous avez une idée pour spécifier dans le CSS qu'il est au premier plan et dans le JavaScrip pour annuler ce "Premier plan" à la fin du chargement de ma page, ce sera formidable.

La partie JavaScript :
document.write('<div class=\"loading\">Veuillez patienter...</div>');
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
  document.getElementByClass("loading").style.display="none";
});
La partie CSS :
.loading {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1000px;
	height: 600px;
	margin-left: -500px;
	margin-top: -300px;
	border: 0px;
	background-color: #000000;
	color: #ffffff;
	text-align: center;
}



Merci d'avance à ceux qui pourront m'aider.

ThiWeb
Modifié par ThiWeb (19 Feb 2007 - 07:21)
QuentinC a écrit :
Peut-être que tu peux t'aider de la propriété .style.zIndex.
Ahh "zIndex" voilà, je me disai bien qu'il y avait une transcription à faire CSS=>JS.
Merci.

Mais au final, j'ai fini par résoudre mon problème en trouvant un autre script.
Je l'ai grandement remanié afin de le passer complettement côté JavaScript et ne laisser plus qu'une toute petite trace côté HTML :

HTML :
<body onload="cacheOff()">
CSS :
#cache {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1000px;
	height: 600px;
	margin-left: -500px;
	margin-top: -300px;
	background-color: #000000;
	text-align: center;
	z-index: 10;
	visibility: hidden;
	color: #ffffff;
}
JavaScript :
document.write('<div id=\"cache\">Veuillez patienter...<\/div>');
document.write('<script type=\"text\/javascript\">');
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache").style }
else if (iex) { cach = cache.style }
largeur = screen.width;
cach.visibility = "visible";
function cacheOff()
{cach.visibility = "hidden";}
document.write('<\/script>');
Voilà, avec ça tout fonctionne parfaitement selon mes souhaits.

Je souhaitai en fait ne pas "montrer" le chargement de mes images qui, étant en PNG se faisait les une après les autres, et à une vitesse... Disons aléatoire.

Là le script fais patienter le visiteur, et BAM affiche proprement tout le site et toutes les image d'un seul coup d'un seul !

C'est en fait un simple DIV qui se "HIDE" à la fin du chargement de la page.
Simple à dire lol, mais ce ne fût pas aussi simple de le faire fonctionner, sans parler de l'adaptation. Smiley cligne

ThiWeb

P.S. : Merci encore !
Bonjour,

Quelques remarques:
- l'effet produit est identique à celui des splash screen flash, et aura le même aspect répulsif pour les utilisateurs.
- l'affichage progressif est une fonctionnalité, il est préférable de ne pas la dégrader.
- si des PNG sont longs à ce point à charger, il serait urgent de les optimiser, de recourir si nécessaire à d'autres formats d'image plus adaptés, de revoir éventuellement le graphisme ou la structure du contenu, etc.
- le contenu généré par le script n'étant pas retiré de l'arbre du document (privilégier d'ailleurs les méthodes DOM sur document.write), il reste affiché sans CSS, lu par un lecteur d'écran, etc.
Modifié par Laurent Denis (19 Feb 2007 - 08:34)
Laurent Denis a écrit :
- l'effet produit est identique à celui des splash screen flash, et aura le même aspect répulsif pour les utilisateurs.
Probable en effet, mais je n'ai pas d'autres options pour un affichage direct.
Je ne suis pas pour l'affichage progressif.
Laurent Denis a écrit :
- l'affichage progressif est une fonctionnalité, il est préférable de ne pas la dégrader.
Dégrader lol n'exagérons rien Smiley smile L'attente est obligatoire dans mon cas comme dans l'autre... C'est sur que du point de vue psychologique, certains préfèreraient voir le chagement alors que d'autres non...
Laurent Denis a écrit :
- si des PNG sont longs à ce point à charger, il serait urgent de les optimiser, de recourir si nécessaire à d'autres formats d'image plus adaptés, de revoir éventuellement le graphisme ou la structure du contenu, etc.
Le chargement n'est pas si long que ça, mais il y a chargement.
4 PNG pour un tableau...
Un en haut, (Largeure 1px)
Un en bas, (Largeure 1px)
Un à droite, (Hauteure 1px)
Un à gauche, (Hauteure 1px)
Et le petit dernier pour le fond. (1px x 1px)
Question optimisation, je ne peux pas faire mieux Smiley confused
Enfin je ne pense pas... C'est du PNG après tout, c'est beau, mais c'est lourd.
Laurent Denis a écrit :
- le contenu généré par le script n'étant pas retiré de l'arbre du document (privilégier d'ailleurs les méthodes DOM sur document.write), il reste affiché sans CSS, lu par un lecteur d'écran, etc.
Je préfère "bourrer" un max le JS parceque dans mon cas, j'aurai besoin de toutes les fonctions dans chacunes de mes pages. Il ne charge donc pas de surplus...
Et ça me permet surtout d'alléger mes pages.

Les conseils étant toujours bons à prendre, je reste attentif à tes remarques et suggestions. N'hésites donc pas et merci encore ! Smiley cligne

ThiWeb
ThiWeb a écrit :
C'est sur que du point de vue psychologique, certains préfèreraient voir le chagement alors que d'autres non...


Ce n'est pas un problème de psychologie à la petite semaine, mais d'accessibilité. L'affichage progressif permet notament à l'utilisateur en bas-débit d'évaluer immédiatement l'intérêt de la page, et de décider s'il en poursuit le chargement ou non.

ThiWeb a écrit :
Je préfère "bourrer" un max le JS parceque dans mon cas, j'aurai besoin de toutes les fonctions dans chacunes de mes pages. Il ne charge donc pas de surplus...


Tu n'as pas compris. Il s'agit de refaire ce script en utilisant proprement les méthodes DOM, et de le terminer en supprimant réellement le contenu généré. En l'état, c'est un bricolage insane.
a écrit :

Ahh "zIndex" voilà, je me disai bien qu'il y avait une transcription à faire CSS=>JS.

Rappelons au passage la règle générale, il n'est jamais mauvais de la répéter rapidement :
propriete-possedant-plusieurs-mots => proprietePossedantPlusieursMots.

Une question à Laurent Denis pendant qu'il est sous la main : que penses-tu de ces div "chargement en cours" lorsqu'il s'agit d'applications AJAX lancées après une action de l'utilisateur (et donc pas en démarrage de page) ?
Sujet clos
Aller à