Mettre mon loader seulement pour charger ma page

Résolu/Fermé

arcadenaker Messages postés 61 Date d'inscription dimanche 30 juillet 2017 Statut Membre Dernière intervention 22 avril 2019 - 19 avril 2019 à 17:29
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>

A voir également:

Ajouter un loader pendant le chargement de vos pages web
Web office - Guide
Traduire une page web - Guide
Ajouter un compte gmail - Guide
Supprimer des pages sur word - Guide
Adresse web - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
19 avril 2019 à 19:00

Bonjour

Intéresse toi au $(document).ready

arcadenaker Messages postés 61 Date d'inscription dimanche 30 juillet 2017 Statut Membre Dernière intervention 22 avril 2019 1
19 avril 2019 à 22:06

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

Tarik
Modifié le 20 avril 2019 à 12:35

ç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
22 avril 2019 à 12:19

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.

Discussions similaires

Comment lancer un loader pour le chargement d'une page HTML

Pages internet qui ne s'ouvre pas malgres une bonne connexion

safari n'arrive plus a ouvrir certains sites

Relier une page CSS à une page HTML

appel d'un fichier css à partir de html

Comment faire bande de couleur haut de page?