Discussion :

[hybride11]

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.

[hybride11]

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 !

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

[hybride11]

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 :

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

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 :

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

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 :

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

1
2
3
 
 
window.dispatchEvent(ressourcechargee);

et pour l'écoute .

Code :

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

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 .