Add animation while loading image

Questions
1

Hi,

In my web application I use an nrrdloader. It works well but the loading can take some time depending on the bandwith of the client.
Is there a way to add an animation to the canvas, like turning arrows or whatever, to display while my nrrd file is being loaded?
Thanks for your help.

2

Unless you use a webworker (not recommended for compatibility), browsers will freeze your entire tab. BUT there is a trick using animated GIF inside html elements. It work only with chromium browsers, because GIF gets a separate thread allowing them to run independently of anything else.

In case you need basic code to synchronize your loading screen:
Here is a very primitive countdown. It’s not fancy but doesn’t require to check if any loader (among hundreds of available plugins) provide callbacks or not. This specific exemple use gltf, but it’s pretty much universal.

const gltfUrl = []; //an array with multiple url
let countDown = 0; //we start at zero

function initGltf(){
for (let i  in gltfUrl) { //loading loop
	countDown++; //countdown increase each time a model is loaded
	gltfLoad( i );
}}

function gltfLoad(i){ //actual loading
gltfLoader.load( gltfUrl[i], function (gltf) {

//code for each model  go here...

countDown --; //start app when we reach zero
if (countDown === 0) { initRendering();	}

});//end loader
}//end function
3

Will it also freeze CSS animations?

4

As far I know, CSS execution is part of the main thread too. And therefore is still subject to freezes. This trick is really an exotic anomaly :sweat_smile: didn’t worked on any non-chromium browsers last time I checked.

1 Like
5

Animations which do not require frame-by-frame layout and/or other style computations will continue running even if the main thread is blocked

1 Like
6

oh that’s amazing news thanks!
So I’m outdated (still require specific CSS tho), they took some sweet time to finally improve this! :joy:

7

If I understood your question correctly, you can utilize the built-in loadingManager object in three.js to monitor the progress of your loading process. By using the onProgress and onLoad functions, you can asynchronously load your object and after loading add it to the scene. Prior to that, you can initiate your animation using CSS, ensuring that it doesn’t block the thread.

https://threejs.org/docs/#api/en/loaders/managers/LoadingManager

1 Like
8

Thanks, that was what I’m looking for.

1 Like