Empêcher la mise en cache d'une image

Version imprimable

Bonjour,

Je vous explique mon souci.

J'ai une page dans laquelle j'ai une image.

J'aimerais que cette image soit rechargée régulièrement et sans être mise en cache pour qu'à chaque rechargement ce soit bien la nouvelle qui soit prise en compte et non celle en cache.

J'ai essayé de charger l'image avec setTimeout mais ça ne fonctionne pas.
Auriez-vous une idée ? sachant que je ne veux pas faire de rechargement de page , juste un rechargement d'image

En code j'ai ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function get_image() { var image = new Image(); image.src = "chemin/test.png"; // je charge l'image image.onload = function() // Une fois le chargement terminé... { document.getElementsByTagName("img")[0].src = image.src; // ...je remplace l'image par celle que je vient de charger... //alert("image remplacee"); get_image(); // ...et je recommence } setTimeout(function(){get_image();},1000); } </script>
Je vous remercie d'avance pour votre aide ;)

:salut:

Exemple fonctionnel.
Noter le "meta cache-control", je l'utilise dans tous mes codes de tests avec une cache de 60s ici je l'ai réduit à 1s.
Voir https://developer.mozilla.org/fr/doc.../Cache-Control

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=1">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
        
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
 
      let
        n = 1,
        image = new Image();
      
      function get_image(){
        image.src = "http://danielhagnoul.developpez.com/images/boule" + n + ".png";
        
        image.onload = function(){
          document.querySelector( "#imgBoules" ).src = image.src;
        };
        
        if ( n < 8 ){
          n++;
          
          setTimeout( function(){
            get_image();
          }, 1000 );
        }
      }
      
      get_image();
      
    }, false );
  </script>
</head>
<body>
  <main>
    <img id="imgBoules">
  </main>
</body>
</html>

14/02/2017, 18h58
NoSmoking

Bonjour,
il existe également :faq: Comment contourner le cache afin de réactualiser une image ou une page ?.