Blog

Lorsque je visite une page, je suis ennuyé lorsque j’essaie d’interagir avec des éléments pendant que le site Web est toujours en cours de chargement. Souvent, les choses bougent, les polices ne sont pas tout à fait chargées et cela semble cassé.

Je sais qu’aujourd’hui, nous sommes obsédés dans ce secteur par le fait de gagner chaque milliseconde en performances de page. Mais dans quelques projets que j’ai récemment révisés, j’ai ajouté un mécanisme de chargement subtil et propre qui, à mon avis, rend l’expérience plus agréable, même si cela retarde légèrement le moment où l’utilisateur peut commencer à interagir avec ma page.

Les deux sites Web dont je parle sont Outils Web hebdomadaires et Valeurs CSS. Visitez chacune de ces pages d’accueil et vous remarquerez dans chaque cas que le contenu s’estompe au lieu de se charger de manière maladroite. Cela est plus visible sur les valeurs CSS, car il y a beaucoup plus de contenu et du JavaScript à charger. De plus, cela se produit sur chaque «page» pour les valeurs CSS, mais uniquement sur la page d’accueil de Web Tools Weekly (bien que techniquement, les pages de valeurs CSS ressemblent plus à des «états»).

Étapes que je veux accomplir

Je suis sûr qu’il existe plusieurs façons d’y parvenir, mais je pense que ma méthode est claire et facile à comprendre. Je fais essentiellement deux choses:

1. Aussi tôt que le l’élément est prêt, réglez-le sur opacity: 0 en CSS.
2. Lorsque le DOM est prêt et que tous les scripts ont fini de s’exécuter, définissez le élément retour à opacity: 1, l’animant pour qu’il entre gracieusement.

Je m’assure également que la page est entièrement visible et accessible à tous ceux qui consultent avec JavaScript désactivé. Ces utilisateurs ne devraient rien remarquer de mal. Cela signifie que je dois définir l’opacité à l’aide de JavaScript.

Le concept ici est fondamentalement le même que si j’ajoutais un spinner de chargement à la page, mais comme la page ne devrait pas se charger longtemps, je ne me soucie pas d’indiquer ce qui arrive à l’utilisateur. Dans d’autres cas, un spinner de chargement peut être plus approprié, mais ici, je suis satisfait d’un simple fondu d’entrée.

Le code

J’aurais pu utiliser des classes dans mon HTML qui sont extraites de ma feuille de style. Mais la feuille de style est externe et je ne l’intègre pas. Donc, si j’essaie d’interagir avec la page avant la fin du chargement de la feuille de style, cela risque de ne pas fonctionner aussi bien. Pour cette raison, j’ai opté pour l’ajout de CSS dans le du document.

Voici à quoi ressemble mon code HTML:

Notez ce qui se passe ci-dessus:

• J’ai ajouté deux blocs de déclaration dans un