Bonjour à tous

Il y a encore pas si longtemps (avant COVID), je faisais des animations sur des pages HTML en javascript avec la librairie p5.js.

Je travaillais en local (par exemple : 1 fichier html, 1 fichier css, le fichier p5.js , une image en .png et 1 fichier script monScript.js) : j'avais des soucis de chargement d'image sous Safari (le Canvas sans image à charger fonctionne parfaitement) mais pas de problème sous Firefox. 

Le chargement des images se faisait avec la fonction preload() de p5.js.

function preload()
{
	personnage=loadImage('bonhomme.png');
}

Remarque : ici l'image a une taille de 2 ko.

En 2020, Firefox nécessite une modification de configuration (privacy.file_unique_origin à passer à False) mais est toujours opérationnel.

Cette année, aucun navigateur n'accepte d'afficher la zone de dessin (qui comporte une image à charger, sinon, pas de souci) sauf à déposer tous les fichiers sur un serveur local (Uwamp, Mamp, Lamp, suivant le système d'exploitation).

Le problème qui surgit alors est le suivant : lorsque l'on modifie le script (changement de couleur par exemple), la modification ne se fait pas forcément sur le Canvas de la page HTML (même si on rafraîchit la page) … le pire des navigateurs (le moins réactif) étant alors Firefox et le plus coopératif (mais pas tout le temps), Edge …

D'avance merci si vous pouvez m'aider sur ces deux questions croisées :

* comment arriver à charger les images sans passer par un serveur ? 

* comment arriver à actualiser correctement la page html (prise en compte du script modifié) lorsque on est sous Uw-M-L-amp ?

Remarques : 

Si on insère dans la page html

<meta http-equiv="refresh" content="1">

, le raffraichissement se fait bien mais avec une coupure d'image très visible …

Si on insère un bouton spécifique (le temps de l'écriture et mise au point par exemple)

<input type="button" value = "Rafraîchir" onclick="history.go()" />

cela semble fonctionner … cela va être ma solution temporaire.

Cordialement

Christine LB