28172 sujets

CSS et mise en forme, CSS3

[Résolu] Cacher contenu page en attendant chargement du CSS

Bonjour,

Je code un site wordpress pour un photographe, et je viens de mettre en ligne la première version sur un lien temporaire, mais lorsque une page se charge, pendant une demi seconde on voit le html sans CSS avant que celui ci ne charge. N'y a-t-il pas un moyen de cacher le contenu en attendant le chargement de la feuille de style?
Merci d'avance ! Smiley smile
Hello,

C'est possible de voir ce lien ?
c'est à "la mano" ou un WP ?

As-tu regardé si tu avais des erreurs ?
Tu peux regarder du coté du poids des images qui peuvent ralentir le chargement ( du css aussi oui ), aussi mettre le css directement dans le <head>.
Après il faut voir si c'est bien le poids des images, les insérer avec JS peut-etre une parade.

Sinon oui c'est possible de "cacher" en attendant le chargement complet ...
Tu ajoute une div qui contient tout ce qu'il y a dans <body> avec par exemple un id:


<div id="contain_site" style="visibility: hidden">
ici tout ton site
</div>


ensuite un petit bout de JS qui va rendre visible ta div au chargement complet:

document.addEventListener('DOMContentLoaded', function () {

	//contain_site.setProperty("visibility","visible"); // Oubli style ^
	contain_site.style.setProperty("visibility","visible");

});

Modifié par stryk (15 Apr 2020 - 14:53)
Merci je vais tester mais avant je mets à jour les liens ^^je croyais que ça l'avait fait automatiquement mais en fait ça a seulement mis à jour les liens qui étaient dans l'interface de wordpress, pas ceux dans le code en dur...
Je m'en étais pas rendue compte parce que j'avais MAMP qui tournait et en fait ça renvoyait vers mon site en local...
Après ça je met le lien !
Ah j'avais oublié qu'avec "visibility" les éléments deviennent invisibles aussi pour JS Smiley lol
Si tu as des interactions html <-> JS , le mieux c'est de procéder comme ce que je t'ai donné mais avec la propriété "opacity":

<div id="contain_site" style="opacity: 0">
ici tout ton site
</div>


ET donc le JS:

document.addEventListener('DOMContentLoaded', function () {

	contain_site.style.setProperty("opacity","1");

});
Voilà le lien du site :
http://srfrvum.cluster026.hosting.ovh.net/
Il faut encore faire pas mal de bidouilles et mettre le vrai contenu mais la structure générale y est.
Peut-tu me dire si tu vois le html apparaitre avant le chargement des page? Ça me le fait plus et j'ai essayé sur un autre ordi et mon mobile mais ça le fait plus (sachant que j'ai rien fait pour, j'ai pas mis le js) Peut-etre que c'était juste le temps de trouver la page en local vu que les liens n'étaient pas bons..

Et j'en profiterais pour te demander si sur cette page, quand tu fais un hover sur les titres, si le fond de la case du titre devient noire?
http://srfrvum.cluster026.hosting.ovh.net/home/storytelling/
j'ai mis background-color : noir;
ça marche sur firefox mais pas sur chrome alors que quand j'ouvre la console sur chrome, ça indique bien que la consigne est prise en compte, elle n'apparait pas barrée Smiley mur
Modifié par Isaabelle (15 Apr 2020 - 17:01)
En fait y'a toujours le souci Smiley biggrin

c'est quoi ça avant la balise <html> ?


<a href="http://srfrvum.cluster026.hosting.ovh.net/home/" title="entrer">
<ul class="cb-slideshow">
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
</ul>
</a>


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div id="contenant-header">
	<h1 id="titre1-header"> Daniel Michelon </br> <span id="titre2-header">Photographe</span></h1>
</div>


Vire-le ou remet-le à sa place Smiley cligne

Je regarde le reste
stryk a écrit :

Vire-le ou remet-le à sa place Smiley cligne


Euuh ben c'est quoi sa place en fait?^^
(j'ai appris toute seule à coder dans wordpress donc je fais surement plein de choses mal !)
mais en fait y a que des feuilles php (je veux dire y a pas une page html quelque part) dans wordpress donc je met le html dedans... C'est pas comme ça qu'il faut faire? Dans la console j'ai bien remarqué quand même que c'était pas très propre parce que y avait du html à deux endroits...
En vrai j'ai découvert hier que dans mes pages wordpress (dans l'interface administrateur) il y a une partie body script ou on peut mettre le html. Mais la question que je me pose c'est que si je ne mets pas du code dans les pages php ça sert à quoi d'avoir des templates/modèles de page?
Modifié par Isaabelle (15 Apr 2020 - 17:44)
En gros tu ne dois pas mettre du code html en dehors de la balise <html>

Balise <meta> à replacer dans le <head>
Le reste doit aller dans le <body>

Il n'y a pas grand chose qu'on puisse placer avant la balise <html> à part du code php

Sinon effectivement au hover des liens, ça passe noir sous firefox mais pas avec chrome ni IE.
Bon ça y est j'ai presque tout replacé au bon endroit, merci, je codais pas du tout au bon endroit et je croyais faire bien ^^' (en même temps ça marchait, c'est pour ça que je croyais bien faire...) Merci sans toi j'aurais persisté très longtemps à coder n'importe comment !

Je crois que le html qui apparaissait avant le chargement de la page était le html placé avant la balise html. Et que donc ça le fait plus là non?
Isaabelle a écrit :
Je crois que le html qui apparaissait avant le chargement de la page était le html placé avant la balise html. Et que donc ça le fait plus là non?


Ah oui c'est certain c'était bien ça ^
Bonjour Isaabelle,
Pour le pb chrome (à tester) :
.h2-storytelling, .h2-cirque, .h2-portfolio{ ....

  animation-fill-mode: none; /* REMPLACEMENT */
  background-color: rgba(0,0,0,0.4);
aliasdmc a écrit :
Bonjour Isaabelle,
Pour le pb chrome (à tester) :
.h2-storytelling, .h2-cirque, .h2-portfolio{ ....

  animation-fill-mode: none; /* REMPLACEMENT */
  background-color: rgba(0,0,0,0.4);


Merci, en effet ça marche Smiley biggrin
Sujet clos
Aller à