# How to get texture.image without using onLoad callback function

**URL:** <https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230>\
**Category:** Questions\
**Tags:** textures\
**Created:** [June 24, 2019, 9:14am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230 "2019-06-24T09:14:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/enzo/32/4656_2.png) [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Post date:** [June 24, 2019, 9:14am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/1 "2019-06-24T09:14:52Z")

</div>

The two options I know for loading textures are:

```auto
const texture = textureLoader.load(url)
texture.image // undefined

```

Or

```auto
textureLoader.load(url, texture=>{
    texture.image // object
})

```

I’m doing an API/Library where I just ask for the texture object. But I need to get the image object somehow. The problem of the second option is that make difficult for users to use it. Is there a way or a method to get the object image using the option one?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 24, 2019, 9:19am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/2 "2019-06-24T09:19:58Z")

</div>

You shouldn’t create a new loader each time you load a texture,The loader always immediatelly returns a texture object, but that doesn’t mean the image is loaded, so this is why your first one won’t have it loaded at this point.

---

<div class="post-metadata">

**Author:** ![Enzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/enzo/32/4656_2.png) [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Post date:** [June 24, 2019, 9:28am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/3 "2019-06-24T09:28:25Z")

</div>

> [@Fyrestar](#):
>
> but that doesn’t mean the image is loaded

The thing is that I’m passing `texture` to my “fancy-api”. So I need to get the image object somehow. So again, is there a way to get the image object using the option one?  
Like:

```javascript
const texture = textureLoader.load(url)
texture.onLoadImage(image=>{...})

```

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 24, 2019, 9:31am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/4 "2019-06-24T09:31:39Z")

</div>

Isn’t that code the same? You just need to consider the loading to be asynchronous, so if you want to access the image object you’ll need a callback, either on that specific load or after loading a bunch of textures.

The image dom object is available immediatelly too btw, since in your first example you commented with “undefined”.

---

<div class="post-metadata">

**Author:** ![Enzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/enzo/32/4656_2.png) [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Post date:** [June 24, 2019, 9:38am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/5 "2019-06-24T09:38:46Z")

</div>

Not the same, here is the difference:

How the user must use my API.

```auto
const fancyApi = new MyCoolFakeFancyApi()
textureLoader.load(url1, texture=>{
    fancyApi.add(texture)
})
textureLoader.load(url2, texture=>{
    fancyApi.add(texture)
})

```

This is how I’d like to be used:

```auto
const fancyApi = new MyCoolFakeFancyApi()
const texture1 = textureLoader.load(url1)
fancyApi.add(texture1)
const texture2 = textureLoader.load(url2)
fancyApi.add(texture2)

```

I’d like to make the onLoad internally, rather than letting the user doing it.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 24, 2019, 9:49am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/6 "2019-06-24T09:49:06Z")

</div>

You could use a loading manager for this, create a `THREE.LoadingManager` and pass it to your `THREE.TextureLoader`, on the manager you set the onLoad callback as described [here](https://threejs.org/docs/#api/en/loaders/managers/LoadingManager), when the items are loaded you could `fancyApi.add` them in that callback.

Or you could adapt your api to accept urls and create/return the texture object. In anyway when you call `load` a texture with a img dom element is created and the url is set so you can’t add a callback afterwards, just abstract it a little, you can make it even more userfriendly.

---

<div class="post-metadata">

**Author:** ![Enzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/enzo/32/4656_2.png) [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Post date:** [June 24, 2019, 10:00am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/7 "2019-06-24T10:00:55Z")

</div>

Could you show a snippet. I don’t get how to combine `TextureLoader` with `LoadingManager`

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 24, 2019, 10:11am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/8 "2019-06-24T10:11:13Z")

</div>

```
const myLoadingManager = new THREE.LoadingManager;
const textureLoader = new THREE.TextureLoader(myLoadingManager);

```

But it might rather help if you could describe what your api is doing, like i said you might rather want to make the load call from your api instead.

---

<div class="post-metadata">

**Author:** ![Enzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/enzo/32/4656_2.png) [@Enzo](https://discourse.threejs.org/u/Enzo)\
**Post date:** [June 24, 2019, 10:12am UTC](https://discourse.threejs.org/t/how-to-get-texture-image-without-using-onload-callback-function/8230/9 "2019-06-24T10:12:06Z")

</div>

I think I just found a solution, but don’t know the tradeoffs of this:

```auto
    const textureOnUpdate = texture.onUpdate
    texture.onUpdate = (...args) => {
        texture.image // it works
        if (typeof textureOnUpdate === 'function') { // in case was defined already by the user
            textureOnUpdate(...args)
        }
        texture.onUpdate = textureOnUpdate
    }

```