Loader (TextureLoader / ImageBitmapLoader) blocks JS main thread, causing temporary freeze

Questions
, ,
1

In my app, I load images (one at a time) to apply them as texture. The problem is that each time an image is loaded, app freezes until loading is completed.

Freezing time (equals loading time) is less than 1 second but is annoying because other operations are also taking place, in other components (non-three.js related). Image size is less than 7MB.

I have tested both TextureLoader & ImageBitmapLoader but unfortunately, I had no luck with either (the latter may have a slightly better performance).

TextureLoader

  const textureLoader = new TextureLoader();
  const texture = textureLoader.load(
    url,
    async () => {
      getUpdateRenderFunction(renderer, scene, camera)();
      await store.dispatch(`loading/${EnumActionTypesLoading.SET_IMAGE_LOADING}`, false);
    },
    (xhr) => console.log(`${((xhr.loaded / xhr.total) * 100)} % loaded`),
    () => console.log('an error happened'),
  );

ImageBitmapLoader

  const imageBitmapLoader = new ImageBitmapLoader();
  imageBitmapLoader.setOptions({ imageOrientation: 'flipY' });

  let imageBitmap: ImageBitmap | null = null;
  try {
    imageBitmap = await imageBitmapLoader.loadAsync(
      url,
      (xhr) => console.log(`${((xhr.loaded / xhr.total) * 100)} % loaded`),
    );
  } catch (err) {
    console.log('an error happened', err);
  }
  if (!imageBitmap) return null;

I also suppose that using Workers (to avoid blocking main thread) is not possible because DOM is not accessible through them.

Any ideas? The freezing is really annoying.

Thanks in advance!