Recharger une image

**eleydet** · 16/12/2023, 16h55

Bonjour,

Un image dessin.png change toutes les secondes. Je veux voir les changements dans une page html, mais il y a ce problème de cache du navigateur. Le programme ci-dessous ne fonctionne pas... Quelles solutions existent pour la fonction recharge()?

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
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script>      
  recharge=function() { document.getElementsByTagName("img")[0].src="dessin.png";  };
  window.onload=function(){ setInterval(recharge,1000); };
  </script>
</head>
 
<body><img src="dessin.png"></body>
 
</html>

**unanonyme** · 16/12/2023, 18h29

Bonjour,

Plutôt que l'évènement "window.load",
on utilisera "document.onDOMContentLoaded".

Car le premier est déclenché après le chargement
des images et autres,
https://developer.mozilla.org/fr/doc...dow/load_event
alors que le second est déclenché dès
que le document est chargé et analysé.
https://developer.mozilla.org/fr/doc...ntLoaded_event

Ceci permettra alors de s'abonner à l'évènement onload
de l'image, dans lequel on utilisera un setTimeout
plutôt qu'un setInterval pour appeler la routine "recharge"
qui aura pour tâche de modifier l'url de la ressource.
Ceci permettra d'éviter des sur chargements si la ressource
externe est longue à chargée.

Finalement pour tromper le système de cache
on se contentera d'ajouter un paramètre fictif
à l'url de la ressource, tel que "?t=.....",
on s'assurera que la valeur change à chaque seconde,
par exemple en utilisant l'expression
Math.round(Date.now() / 1000).

A vous de coder.

Bonne journée.

**eleydet** · 16/12/2023, 21h42

Bonsoir,

Merci unanonyme, pour votre réponse.
Le paramètre fictif à la fin de l'url était une solution efficace. Elle ne l'ai plus!

Bien à vous.

**unanonyme** · 17/12/2023, 11h16

Bonjour,

Effectivement c'est pas de bol pour vous.

A mon avis, vous avez mal qualifié votre problème.

Bonne journée.

**unanonyme** · 17/12/2023, 11h52

Bonjour,

Vous pouvez toujours vous amuser à faire un fetch de la ressource,
cela permettra d'insérer un en-tête HTTP de contrôle de cache.

Pour l'afficher, canvas, base64, URLObject sont des méthodes disponible.
https://developer.mozilla.org/fr/doc...jectURL_static
https://developer.mozilla.org/fr/doc...est_directives
https://developer.mozilla.org/fr/doc...HTTP/Data_URLs
https://developer.mozilla.org/fr/doc...l/Using_images

Bonne journée.

**eleydet** · 17/12/2023, 18h31

Bonsoir,

Voici une autre formulation du problème. Le programme en python ci-dessous crée un carré de coté 100 pixels, nommé dessin.png, qui change de couleur chaque seconde. Comment puis-je l'afficher dans une page HTML, la couleur devant changer chaque seconde? La page doit pouvoir fonctionner en local, d'où l'utilisation du JavaScript.

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
16
17
import random
import time
from PIL import Image
 
img=Image.new("RGB",(100,100))
num = 0
while True :
  r=int(255*random.random())
  g=int(255*random.random())
  b=int(255*random.random())
  for x in range(100) :
    for y in range(100) :
      img.putpixel((x,y),(r,g,b))
  img.save("dessin.png")
  print("Bloc",num)
  num += 1
  time.sleep(1)

Recharger une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager