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

**URL:** <https://discourse.threejs.org/t/loader-textureloader-imagebitmaploader-blocks-js-main-thread-causing-temporary-freeze/44579>\
**Category:** Questions\
**Tags:** image, loaders, textures\
**Created:** [November 11, 2022, 12:20pm UTC](https://discourse.threejs.org/t/loader-textureloader-imagebitmaploader-blocks-js-main-thread-causing-temporary-freeze/44579 "2022-11-11T12:20:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![K\_Dos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/k_dos/32/26184_2.png) [@K\_Dos](https://discourse.threejs.org/u/K_Dos)\
**Post date:** [November 11, 2022, 12:20pm UTC](https://discourse.threejs.org/t/loader-textureloader-imagebitmaploader-blocks-js-main-thread-causing-temporary-freeze/44579/1 "2022-11-11T12:20:57Z")

</div>

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**

```javascript
  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**

```javascript
  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!