Mettre mon loader seulement pour charger ma page [Résolu]

Messages postés
61
Date d'inscription
dimanche 30 juillet 2017
Statut
Membre
Dernière intervention
22 avril 2019
- - Dernière réponse : arcadenaker
Messages postés
61
Date d'inscription
dimanche 30 juillet 2017
Statut
Membre
Dernière intervention
22 avril 2019
- 22 avril 2019 à 12:19
Bonjour à tous,

j'aimerais faire en sorte que le loader s'enlève quand toute la page a chargée et qu'il ne dépende pas d'un "setTimeout" de 4 secondes car je trouve que c'est inutile de faire attendre 4 bêtes secondes si la page est déjà chargée avant. Voici mon code ci-dessous:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		#spinner{
			width: 120px;
			height: 120px;
			background: transparent;
			border-left: 10px solid gray;
			border-right: 10px solid gray;
			border-top: 10px solid lightgreen;
			border-bottom: 10px solid gray;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -60px;
			margin-top: -60px;
			border-radius: 50%;
			animation: loader 1.5s linear infinite;
		}
		@keyframes loader{
			100%{
				transform: rotate(360deg);
			}
		}
         </style>
</head>
<body>
	<div id="spinner"></div>

	<script type="text/javascript">
                <!-- C'est le setTimeout que je vous parlais -->
		var loadpage = setTimeout(loadpage,4000);
		function loadpage(){
			document.getElementById('spinner').style.display = 'none';
			document.getElementById('page-content').style.display = 'block';

		}
	</script>

	<div id="page-content"></div>
	
</body>
</html>
Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
25987
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2019
1719
1
Merci
Bonjour

Intéresse toi au $(document).ready

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 55038 internautes nous ont dit merci ce mois-ci

arcadenaker
Messages postés
61
Date d'inscription
dimanche 30 juillet 2017
Statut
Membre
Dernière intervention
22 avril 2019
1 -
Bonjour,

Merci beaucoup pour ta réponse et c'est vrai que c'est une bonne idée, j'ai réussi à faire ce que je voulais avec ça.
$(document).ready(function() {
        	document.getElementById('spinner').style.display = 'none';
	        document.getElementById('page-content').style.display = 'block';
});


Bonne journée
ça serait mieux un document.onload= function() {
...script
}

car au moins ça n'oblige pas de charger les 400ko de JQuery, enfin les 2 marchent mais pour du préchargement rajouter du temps de chargement me semble pas le plus optimisé ;)
arcadenaker
Messages postés
61
Date d'inscription
dimanche 30 juillet 2017
Statut
Membre
Dernière intervention
22 avril 2019
1 > Tarik -
C'est vrai que c'est une meilleure idée parce que oui c'est sûr, charger JQuery c'est légèrement plus long pour la page.

Merci pour vos réponse.
Commenter la réponse de jordane45