Image loading après un clic

Version imprimable

07/08/2017, 10h44
Devilju69

Image loading après un clic

Bonjour,
J'ai besoin de votre aide.
Je souhaite que lorsque je clic sur un lien de mon site, il y a une petite image chargement qui s'affiche en attendant le chargement de la page suivante.
Merci d'avance de votre aide
07/08/2017, 11h40
Doksuri

tu ne peux pas vraiment faire ca nativement. quand tu change de page, c'est le navigateur qui se charge de tout.

par contre, ce que tu peux faire (si c'est a ca que tu pensais) c'est que tout le contenu de toutes tes pages se chargent en ajax. (mais si tu es debutant) ca risque d'etre complique
07/08/2017, 11h53
arthur57

Bonjour,

En effet d'une page à l'autre c'est le navigateur qui s'en occupe.
Mais tu peux toujours mettre une image chargement au OnLoad de ta page
exemple simple

Cordialement
07/08/2017, 15h57
Devilju69

Donc ce n'est pas possible d'afficher une image immédiatement après un clic ?

Un exemple simple

L'image dans ta page HTML

Code:

1
2
 
    <a class="myImgWrapper" href="maPagePHP.php"><img src="monImage.jpg" alt=""></a>

Le script dans ton fichier JS

Code:

1
2
3
4
5
 
 $('.myImgWrapper').on('click', function(e) {
        let html = "<div style='position:absolute;top:0;bottom:0;width:100%;height:100%;background-color:#fff'><div style='text-align:center'>ceci est un test</div></div>";
        $('body').append(html);
    })

Un bon CSS derrière tout ça et ça le fait (ça devrait le faire) :-)

07/08/2017, 16h12
arthur57

Citation:

Envoyé par Devilju69

Donc ce n'est pas possible d'afficher une image immédiatement après un clic ?

C'est plus très clair pour ma part, le clic = une nouvelle page web ?
Quand souhaites-tu afficher ton image exactement ? :weird:
07/08/2017, 16h51
Devilju69

Lorsque l'on clique sur un lien, oui cela ouvre une nouvelle page mais de temps en temps le site met du temps à basculer sur la nouvelle page ; et pendant ce temps d'attente, juste une image loading pour pas que la personne clic une deuxième fois.
08/08/2017, 08h22
arthur57
Bonjour,

Tu peux exécuter l'événement que tu souhaites avec l'exemple de ma5t3r, ou simplement le onclick :oops:
Sinon je te renvoie vers le premier exemple qui met une image de chargement avant de charger l'image (:aie:)
Code:

1 2 3 4 5 6 7 var image = document.images[0]; var downloadingImage = new Image(); downloadingImage.onload = function(){ image.src = this.src; }; downloadingImage.src = "image.jpg";

Bonjour,

Si vous voulez ouvrir une nouvelle page, vous pouvez placer le contenu de cette page dans une variable, puis, lorsque l'ensemble est chargé, remplacer l'image de départ par le contenu de cette variable.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <noscript>Pour utiliser cette application, activez le JavaScript.</noscript>
    <div id="page"></div>
    <script>
      document.getElementById("page").innerHTML='<img src="chargement_en_cours.gif">';
      var ch="La page.<br>";
      ch+="La suite de la page...<br>";
      ch+="La fin de la page.";
      onload=function() { document.getElementById("page").innerHTML=ch; };
    </script>
  </body>
</html>

Rebonjour,

Si on reste dans l'idée d'ouvrir une nouvelle page, on peut aussi cacher le contenu de celle-ci pendant le chargement, puis, celui-ci étant terminé, remplacer l'image de départ par la page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <noscript>Pour utiliser cette application, activez le JavaScript.</noscript>
    <div id="chargement"></div>
    <script>
      document.getElementById("chargement").innerHTML='<img src="chargement_en_cours.gif">';
      onload=function() {
        document.getElementById("chargement").style.display="none";
        document.getElementById("page").style.display="block";
      };
    </script>
    <div id="page" style="display:none;">
      La page.<br>
      La suite de la page...<br>
      La fin de la page.
    </div>
  </body>
</html>

08/08/2017, 18h25
NoSmoking

Bonjour,
la meilleur solution reste d'optimiser tes fichiers/pages, il existe pas mal d'outils, afin qu'elles se chargent au plus rapide. Les solutions proposées, même si elles peuvent fonctionner, ne sont pas pour moi de bonnes approches et font fuir le visiteur la plupart du temps.

Une autre approche est le « One-Page » et là tu peux te permettre d'afficher un « loading » pendant la requête Ajax. (approche Doksuri, mais pas si complexe que cela.)

Bonjour,

L'approche "One-Page", proposée par NoSmoking (et Doksuri), a le grand avantage d'éviter d'ouvrir une nouvelle page. Selon Wikipédia :

Une application web monopage (en anglais single-page application ou SPA) est une application web accessible via une page web unique. Le but est d'éviter le chargement d'une nouvelle page à chaque action demandée, et de fluidifier ainsi l'expérience utilisateur. Deux méthodes existent pour ce faire :
- l'ensemble des éléments de l'application est chargé (contenu, images, CSS et JavaScript) dans un unique fichier HTML,
- soit les ressources nécessaires sont récupérées et affichées dynamiquement en fonction des actions de l'utilisateur.

Première méthode
L'affichage de la nouvelle page est presque immédiat. La petite image de chargement est donc inutile. Exemple illustrant la méthode :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> changer=function() { document.getElementById("page1").style.display="none"; document.getElementById("page2").style.display="block"; }; </script> </head> <body> <div id="page1"> Première page.<br><br> <a onclick="changer();">Suivant</a> </div> <div id="page2" style="display:none;"> Deuxième page. </div> </body> </html>
Deuxième méthode
Avec un iframe plutôt qu'avec XMLHttpRequest... désolé, je n'ai pas pu résister. Cela fonctionne en local. Exemple illustrant cette méthode :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> changer=function() { document.getElementById("page1").style.display="none"; document.getElementById("chargement").style.display="block"; document.getElementById('page2').src="page2.html"; document.getElementById('page2').onload=function() { document.getElementById("chargement").style.display="none"; document.getElementById("page2").style.display="block"; }; }; </script> </head> <body> <div id="page1"> Première page.<br><br> <a onclick="changer();">Suivant</a> </div> <div id="chargement" style="display:none;"> <img src="chargement_en_cours.gif"> </div> <iframe id="page2" style="display:none;"></iframe> </body> </html>

Bonjour,

Cette question n'est pas encore résolue? Deuxième méthode donc, mais avec XMLHttpRequest() cette fois.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      changer=function() {
        document.getElementById("page1").style.display="none";
        document.getElementById("page2").innerHTML='<img src="chargement_en_cours.gif">';
        xhr=new XMLHttpRequest();
        xhr.open("GET", "page2", false);  // Requête définie en mode synchrone
        xhr.send(null);                   // Envoie de la requête...
        document.getElementById("page2").innerHTML=xhr.responseText;
      };
    </script>
  </head>
  <body>
    <div id="page1">
      Première page.<br><br>
      <a onclick="changer();">Suivant</a>
    </div>
    <div id="page2"></div>
  </body>
</html>

Fichier page2 (par exemple) :

Code:

1
2
3
La page 2.<br>
La suite de la page 2...<br>
La fin de la page 2.