Image loading après un clic

**Devilju69** · 07/08/2017, 10h44

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

**Doksuri** · 07/08/2017, 11h40

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

**arthur57** · 07/08/2017, 11h53

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

**Devilju69** · 07/08/2017, 15h57

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

**ma5t3r** · 07/08/2017, 16h03

Un exemple simple

L'image dans ta page HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le script dans ton fichier JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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) :-)

**arthur57** · 07/08/2017, 16h12

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 ?

**Devilju69** · 07/08/2017, 16h51

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.

**arthur57** · 08/08/2017, 08h22

Bonjour,

Tu peux exécuter l'événement que tu souhaites avec l'exemple de ma5t3r, ou simplement le onclick

Sinon je te renvoie vers le premier exemple qui met une image de chargement avant de charger l'image (

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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";

**eleydet** · 08/08/2017, 11h57

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**eleydet** · 08/08/2017, 12h58

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 08/08/2017, 18h25

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.)

**eleydet** · 09/08/2017, 18h55

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**eleydet** · 12/08/2017, 13h43

Bonjour,

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Image loading après un clic

JavaScript

Discussions similaires

Partager

Partager