Mettre mon loader seulement pour charger ma page

Résolu

arcadenaker Messages postés 61 Date d'inscription Statut Membre Dernière intervention -
arcadenaker Messages postés 61 Date d'inscription Statut Membre Dernière intervention - 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 css
Web office - Guide
Creation de site web - Guide
Windows loader - Télécharger - Gestion de fichiers
Impossible de supprimer une page word - Guide
Comment traduire une page web - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour

Intéresse toi au $(document).ready

arcadenaker Messages postés 61 Date d'inscription Statut Membre Dernière intervention 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

Tarik

ç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 Statut Membre Dernière intervention 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.

Discussions similaires

"L'archive n'a pas pu être installée. Il manque le fichier style.css à ce

Diaporama HTML CSS

probleme CSS ne s'applique pas

Séparer les codes CSS, HTML et JS qui se trouvent dans un fichier .html

Comment coder la taille des boutons coté html ?

Mettre une opacity sur un background-image

Votre réponse

Discussions similaires