11492 sujets

JavaScript, DOM et API Web HTML5

Chargement des JS pas esthétique

Bonjour,

Connaissez vous un moyen simple de pré-loader des codes javascripts ou du moins afficher un gif de loading avant leur chargement complet? Ca ne me paraît être pas une bonne manip peut-être avez-vous une solution plus adaptée pour éviter de voir la construction de la page ?

Pour comprendre voir mon site en cours de débugage ici: www.5mars.com/

Merci
Moi je dirais qu'un JS qui a besoin d'un temps de chargement tel qu'on ait besoin d'un tel dispositif n'a pas sa place sur un site web. Conception/construction globale probablement à revoir.
Bonjour,

hors sujet -> J'aime bien l'esthétique de votre site web mais par contre il comporte de nombreuses erreurs tant au niveau de vos html/css, js. Smiley rale Pensez à rendre votre site accessible.
5mars a écrit :

avez-vous une solution plus adaptée pour éviter de voir la construction de la page ?

Fermer les yeux ? Smiley langue
Non sérieusement, pour le chargement de la page je n'ai pas eu droit à voir la construction de celle-ci..tout à été chargé instantanément. Cela dépend certainement du type de connexion qu'on a, du navigateur qu'ont utilise,..
Pas de préload. En revanche, tu peut définir dans le style du body la propriété visibility à hidden puis sur le onload de la fenêtre définir une fonction js qui bascule cette même valeur a visible. Le défaut, c'est que la page sera invisible si le js est désactivé.
Modérateur
Salut,

Il faut ajouter :
...
<body><script type="text/javascript">
document.body.className += ' hasJS';
</script>
...
puis dans la css :
.hasJS #loulou {display:none;}


Ca ne charge pas le JS plus vite mais ça empêche le sursaut au chargement de la page et on conserve l'accessibilité lorsque JS est inactif.

NB: L'absence d'espace entre <body> et <script type="text/javascript"> est nécessaire pour que cela fonctionne correctement.
Merci pour vos réponses;

Arsene: Tu as probablement raison; Mais en fait ce n'est pas d'un pré-loader qu'il me faut mais surtout le moyen d'éviter le "saut" créer lorsque celui-ci est chargé.

ghijselinck: Content que vous n'ayez pas eu de problème de chargement (en effet ma connexion n'est pas super rapide) Pour le code si vous pouvez me faire un retour rapide sur les erreurs qui rendent mon site inaccessible je suis preneur!

MacIntoc: Merci ta solution pourrait être très pratique! Dommage en effet que cela ne rende la visibilité nulle au javascipt désactivé Smiley ohwell

koala64: J'ai essayer ton code merci! Par contre je ne vois pas en quoi cela empêche le sursaut au chargement?
Dans ton exemple la div avec ID loulou sera masquée lorsque javascript est activé. Avec l'ID loulou définit ainsi: #loulou{display:visible} et dans le cas où le javascript est désactivé, alors la DIV loulou devient visible.. C'est bien cela?

Ou alors cela serait à utiliser avec le tips de MacIntoc?
Bravo 5mars! Smiley clapclap

Votre document est désormais valide et ne comporte plus aucune erreur !

Si tu souhaites vraiment être "tip/top", tu peux toujours résoudre les 44 avertissements qui sont encore présents dans ta feuille de style.
Je t'invite également à visiter ce site web qui te sera probablement utile. Smiley err

Bonne chance et bonne continuation.
Hello,

ghijselinck a écrit :

Si tu souhaites vraiment être "tip/top", tu peux toujours résoudre les 44 avertissements qui sont encore présents dans ta feuille de style.
Oui mais non : les avertissements indiquent juste une éventualité de problème du type "La même couleur est utilisée en tant que couleur et couleur de fond" et ne sont pas nécessairement à "corriger".
Ouais j'ai eu le droit a un joli logo W3C! J'en suis fier Smiley smile

Pour les avertissements comme dit Heyoan ils n'ont pas l'air bien méchant, et je dois passer à autre chose maintenant.. Je viens de recevoir ma licence Shiva et je vais essayer de faire une petite demo en ligne de visite virtuelle; Je garde donc ton lien de côté !!

Merci pour vos conseils à bientôt !
Modérateur
Salut,

a écrit :
koala64: J'ai essayer ton code merci! Par contre je ne vois pas en quoi cela empêche le sursaut au chargement?
Dans ton exemple la div avec ID loulou sera masquée lorsque javascript est activé. Avec l'ID loulou définit ainsi: #loulou{display:visible} et dans le cas où le javascript est désactivé, alors la DIV loulou devient visible.. C'est bien cela?
En fait, il faut que tu aies une interface correctement mise en page et fonctionnelle lorsque JS est inactif.

De là, l'ajout de la classe hasJS se fait avant même que quoi que ce soit n'apparaisse.

Cela te permet donc prévoir tous les styles nécessaires à la mise en page résultante lorsque JS est actif tout en évitant de visionner des superpositions ou des déplacements de blocs (comme c'est actuellement le cas avec tes blocs "+ d'infos", "mes tarifs", etc...). En effet, tu peux d'ores et déjà aligner ces blocs dès lors que les styles que tu mets sont dépendants de la classe hasJS.

L'exemple que je te donnais avec le display:none; est juste là... à titre d'exemple. Il ne s'agissait pas de dire que c'est la propriété que tu dois mettre ici mais plus de dire que quelquesoit le style que tu définis, celui-ci sera présent dès l'apparition de la page et uniquement si JS est actif.
Merci koala64!

Je ne comprenais pas trop mais cela était surtout du à ma faible connaissance du langage! (Pas toujours facile pour un infographiste Smiley murf )
En fait après quelques tests et recherches j'avais compris la technique! Qui d'ailleurs est vraiment pratique! Donc merci encore pour ton aide je vais mettre en place le tips que tu viens de m'expliquer Smiley cligne

See you

(au fait je n'avais pas vu mais je n'ai franchis que l'étape de validation CSS... fausse joie, il me reste encore à passer celle XHTML 1.0 Smiley sweatdrop ; à voir si c'est possible avec mon menu flash et autres scripts JS)
Je me permets de poser une autre question, au risque de déborder du topic de départ...
Cela concerne toujours l'utilisation de mes scripts (il me semble) alors je me lance:

J'ai testé la validation W3C pour le code Html et le report était encore plus désastreux que pour mon CSS. Après plusieurs longues heures à tourner en rond pour chercher des astuces qui me permettrait de passer correctement mes scripts (balises"<"), l'insert du flash, et le reste, je me demande tout simplement si j'ai un petit espoir de voir un jour le cadre rouge de cette page
... en vert Smiley ohwell

Quelqu'un pourrait-il me donner son avis?
Bonjour 5mars,

suivant de ce que j'ai pu lire dans l'analyse de votre validation xhtml, vous avez mal fermé certaines balises, oublié quelques guillemets ou autres..mais le plus flagrant est le jeu de caractères..par manque de temps je vous invite à lire cette page, c'est sur les différents types de jeux de caractères, Raphael explique très bien cela.

Désolé de ne pas pouvoir t'aider plus que cela, mais je suis certain qu'avec ta bonne humeur et ta motivation d'autres membres du forum seront prêt à vous aider. Smiley cligne

Bon weekend à tous!
Merci ghijselinck! J'ai corrigé mon problème de norme! Je vais parcourir le forum dans la rubrique adaptée ce weekend pour démêler un peu mon code...
Bon weekend!
Sujet clos
Aller à