window.addEventListener load ne fonctionne pas sous chrome

Bonjour ,

je suis en train de tester la compatibilité d'une page avec chrome . Cette page appelle plusieurs fichiers js comme three.js et charge des fichiers .glb très lourd ( c'est pour de la 3d )

pour être sûr que toutes les ressources sont chargées avant de lancer le rendu , j'utilise un window.addeventlistener( 'load' , ma fonction qui lance le rendu ); ça fonctionne très bien sous firefox qui charge tout avant de lancer le rendu , mais sous chrome ça ne fonctionne pas . le message d'attente disparait aussitôt apparu , et comme toutes les ressources ne sont pas chargées , j'ai des messages d'erreur concernant des propriétés d"objets undefined ...forcément .

d'où la question : quoi utiliser à la place de window.addeventlisterner( 'load" ) pour que le code soit compatible chrome ?

merci.

J'ai finalement trouvé une solution , pas très élégante mais bon .

le code qui est doit être utilisé une fois la page chargée , je l'ai collé dans un setTimout avec 20 secondes de délai d'attente et là ça fonctionne sous chrome ! :aie:

et surprise ça fonctionne "mieux" sous chrome que sous firefox .
sous chrome : 60 fps
sous firefox : 30 fps

peut être parce que sous chrome il y a un support de vulkan ( dans about:flags mettre vulkan à enabled ) .

finalement la solution avec setTimeout ( si ce n'est pas firefox ) fonctionne que dans certain cas , Si la personne à une connexion fibre ça passe mais du coup il attend un peu trop , si la personne à une connexion adsl 20 secondes ce n'est pas assez .

Code:

---

1 2 3 4 5 6 7

window.addEventListener('load', (e) => {   var navi=/^.*Firefox.*$/ if(navi.test(window.navigator.userAgent)){ init(); } else { setTimeout(init,20000); } });

---

du coup comme l'utilisation de l'évenement load ne fonctionne pas comme souhaité autant en créer un



création d'un évenement ressourcechargee

Code:

---

1 2	var ressourcechargee=new Event('ressourcechargee');

---

dans le loader ( THREE.GLTFLoader() ) qui récupère un gros fichier il y a une fonction qui se déclenche quand le fichier est chargé , à la fin de cette fonction j'ajoute un

Code:

---

1 2 3

window.dispatchEvent(ressourcechargee);

---

et pour l'écoute .

Code:

---

1 2 3 4 5 6 7

var compteurRessourceChargee=0;   window.addEventListener('ressourcechargee', (e) => { compteurRessourceChargee += 1; if ( compteurRessourceChargee === 6 ) { init();} });

---

6 car il y a 6 gros fichiers .



Je ne sais pas si il y a mieux mais cette solution fonctionne sur firefox , chrome et edge et quelque soit le type de connexion .