IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Recharger une image


Sujet :

JavaScript

  1. #1
    Membre chevronné
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 392
    Par défaut Recharger une image
    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>

  2. #2
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    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.

  3. #3
    Membre chevronné
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 392
    Par défaut
    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.

  4. #4
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    Bonjour,

    Effectivement c'est pas de bol pour vous.

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

    Bonne journée.

  5. #5
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    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.

  6. #6
    Membre chevronné
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 392
    Par défaut
    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)

  7. #7
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    Bonjour,

    Vous pourriez faire tout cela côté client en Javascript.

    Quand je disais que votre problème est mal qualifié,
    je faisais référence à votre pile HTTP,
    et ses règles de mise en cache.

    Comme vous semblez avoir accès à la partie serveur,
    vous pourriez peut être paramétrer le cache à la source directement ?
    https://developer.mozilla.org/fr/doc...e_r%C3%A9ponse

    Bonne journée.

  8. #8
    Membre chevronné
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    392
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 392
    Par défaut
    Bonsoir,

    Il y un an environ, je travaillais sur un réseau local d'une dizaine de PC. Sauf erreur de ma part, ce système de paramètre fictif à la fin de l'URL, pour recharger l'image, ne fonctionnait pas sur ce réseau. Il faut dire qu'il était configuré avec diverses restrictions un peu pénibles à contourner.

    J'ai donc recherché une autre solution. Après plusieurs tentatives, je n'ai pas trouvé mieux que ce paramètre fictif. En tous les cas, merci unanonyme pour vos bonnes idées. Elles m'ont été utiles!

  9. #9
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    Bonjour,

    il est tout à fait possible que cette technique échoue.
    On peut s'en convaincre en parcourant la documentation
    gcloud > mise en cache
    https://cloud.google.com/cdn/docs/us...che-keys?hl=fr
    Hors, vous n'avez pas décrit cette pile HTTP,
    il n'est donc pas possible d'en déduire des éléments
    précis et utile, même si l'on peut concevoir que
    vous exécutiez cela dans un environnement particulièrement
    singulier.

    Cependant, les RFC de standardisation sont explicites sur ce fait,
    en situation "normal", la chaine de paramètres (query string)
    doit être incluse lors du calcul de la clef de mise en cache.

    Pour le reste, bien que ce thread me laisse un sentiment
    d'inachevé, l'essentiel est que cela fonctionne pour vous,
    que vous utilisiez une méthode que vous maîtrisez.

    Je n'aurais pas refusé de coder un peu une des
    multiple méthodes de contournement que je vous
    ai donné, mais cela a peu d'intérêt pour moi ou vous
    de le donner tout cuit dans le bec.

    Bonne journée.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Prototype] Recharger une image
    Par estampille dans le forum Bibliothèques & Frameworks
    Réponses: 4
    Dernier message: 05/01/2009, 14h54
  2. Réponses: 6
    Dernier message: 09/10/2008, 19h43
  3. [PHP-JS] Recharger une image
    Par L8O8L dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 14/05/2008, 16h27
  4. Sauver/ReCharger une image, donne
    Par Happy dans le forum C++
    Réponses: 3
    Dernier message: 18/05/2007, 13h06
  5. Recharger une image dans la cache
    Par Prophetis dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 13/07/2006, 13h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo