qui n’a pas eu de problèmes d’essayer que le site ne voyait pas tant que le contenu n’a pas été chargé? La même chose s’est produite sur mon dernier site web. La conception avait beaucoup d’images dans chaque section, avec des photos impossibles à optimiser par sa nature, ce qui provoque un effet peu clair sur chaque changement de page: la conception a été mélangée jusqu’à ce que les images soient digérées pour être téléchargées. La solution? Parmi de nombreuses possibilités, j’ai décidé de créer un chargeur qui couvre tout le site jusqu’à ce qu’il soit prêt à faire défiler à travers les yeux de mes visiteurs.
par le réseau que j’ai vu de nombreux extraits, ou des codes qui pourraient les résoudre; Mais la grande majorité dépassée. Pour cette raison, j’ai décidé de planifier un système moderne que je partage pour que quiconque puisse l’utiliser.
code ou snippet
Il est très important que le HTML et le CSS du chargeur soient La première chose que l’utilisateur voit, avant même que le fichier CSS avec vos styles arrive traité. Par conséquent, vous devez l’inclure dans le brut, et aussi où le corps commence. Dans l’exemple, je vous laisse une mise en page où tout ce qui est visible est couvert, ajoute un fond blanc et, d’autre part, il se concentre sur une rotule (virements de cercle de cercle).
<body> <!-- Loading --> <style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: 1s all; opacity: 0; } .loading.show { opacity: 1; } .loading .spin { border: 3px solid hsla(185, 100%, 62%, 0.2); border-top-color: #3cefff; border-radius: 50%; width: 3em; height: 3em; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="loading show"> <div class="spin"></div> </div> <!--- Resto de tu HTML --></body>MAINTENANT à quoi vous attendre si nécessaire. Le code suivant supprime le chargement lorsque:
- Le DOM est prêt (HTML).
- Toutes les images ont été téléchargées.
- Ceci présente le HTML Chargeur (représenté avec la classe de chargement).
//======================================================================// LOADING//======================================================================var Loading = (loadingDelayHidden = 0) => { //----------------------------------------------------- // Variables //----------------------------------------------------- // HTML let loading = null; // Retardo para borrar const myLoadingDelayHidden = loadingDelayHidden; // Imágenes let imgs = ; let lenImgs = 0; let counterImgsLoading = 0; //----------------------------------------------------- // Funciones //----------------------------------------------------- /** * Método que aumenta el contador de las imágenes cargadas */ function incrementCounterImgs() { counterImgsLoading += 1; // Comprueba si todas las imágenes están cargadas if (counterImgsLoading === lenImgs) hideLoading(); } /** * Ocultar HTML */ function hideLoading() { // Comprueba que exista el HTML if(loading !== null) { // Oculta el HTML de "cargando..." quitando la clase .show loading.classList.remove('show'); // Borra el HTML setTimeout(function () { loading.remove(); }, myLoadingDelayHidden); } } /** * Método que inicia la lógica */ function init() { /* Comprobar que el HTML esté cargadas */ document.addEventListener('DOMContentLoaded', function () { loading = document.querySelector('.loading'); imgs = Array.from(document.images); lenImgs = imgs.length; /* Comprobar que todas las imágenes estén cargadas */ if(imgs.length === 0) { // No hay ninguna hideLoading(); } else { // Una o más imgs.forEach(function (img) { // A cada una le añade un evento que cuando se carge la imagen llame a la funcion incrementCounterImgs img.addEventListener('load', incrementCounterImgs, false); }); } }); } return { 'init': init }}// Para usarlo se declara e inicia. El número es el tiempo transcurrido para borra el HTML una vez cargado todos los elementos, en este caso 1 segundo: 1000 milisegundos,Loading(1000).init();Payez une attention particulière à cette ligne.
indique le retard, en millisecondes, lors de la suppression du chargeur lorsque tout est téléchargé. Et init () sera responsable de l’activation de la logique.
complet et optimisé
afin que vous puissiez l’utiliser directement, j’ai laissé l’exemple avec le code JavaScript minimisé (supprimer des commentaires et des espaces pour Occuper moins).
Version de bureau