Bonjour,

j'ai crée ce petit code qui affiche un loader dans la balise section le temps que la page se charge totalement.

Qu'en pensez vous ? Le code est-il optimisable ? Ou est ce que vous auriez codé différemment ? Le but étant d'avoir une réaction dès le click.

Merci pour vos conseils.

document.getElementById("test").onclick = function()
{	

	setTimeout(function(){
		
			document.querySelector('section').innerHTML='<img src="loading.gif" alt="">';
		
	},500);
};

-
Edité par sagaff 12 décembre 2018 à 21:37:45

Il te suffit de faire ça

<div id="gif" onClick="load()" onLoad="loaded()"><img src="images/MonGif.gif" alt="MonGif !"></img></div>

et le Javascript:

function load() {

document.getElementById("gif").innerHTML="<img src=\"images/MonGif.gif\" alt=\"MonGif !\"></img>";

}

function loaded() {

document.getElementById("gif").innerHTML = "Page chargée !";

}

(désolé pour la mise en page du code mais sur mon téléphone, je ne sais comment faire) 

-
Edité par Majoras16Forever 12 décembre 2018 à 21:58:59

Merci pour ta solution, mais concernant mes liens href <a id="test">lien</a>

Je les modifie comment ?

Visiblement, cela ne fonctionne pas car il n'y a aucun lien pointé...

-
Edité par sagaff 13 décembre 2018 à 6:12:37

<a id="test" href="ton-lien.html">Test</a>

 href est l'URL, donc par exemple:

<a id="google" href="https://google.fr/">Google</a>

Salut,

je pense que le mieux reste de faire ton loader en html + css, sans javascript.

Une fois que la page est chargée tu le cache, avec une petite animation si possible.

C'est plus optimisé, car pas la peine d'attendre que le js se charge pour afficher ton loader,

il est affiché par défaut.

-
Edité par lk77 14 décembre 2018 à 21:36:03

En plus je viens d'y penser mais l'image de chargement va s'afficher quand il sera charger mais elle sera automatiquement changée, donc on vera pas le loader...

Enfin, moi j'essaye juste d'aider

sagaff, j'ai jamais dit qu'il n'y a pas du tout de javascript, juste que pour la partie loader html + css suffit. Après pour cacher le loader il faudra le faire en js oui.