Empêcher la mise en cache d'une image

**rbkclg** · 13/02/2017, 18h42

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 :

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

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

**danielhagnoul** · 14/02/2017, 00h13

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

**NoSmoking** · 14/02/2017, 18h58

Bonjour,
il existe également

Comment contourner le cache afin de réactualiser une image ou une page ?.

Empêcher la mise en cache d'une image

JavaScript

Discussions similaires

Partager

Partager