Load images individually

[royibernthal]

I'm creating a scrollable list of images, I need to be able to individually load and unload each image according to whether it's currently within the viewport or not.

PIXI loader is not good for this case because I need to wait for it to finish loading every time before I can load more images, which results in an async operation.

 

What comes to my mind is to create my own images loader:

1) Load individual images by creating img element and setting src

2) Once an image is loaded - create from it base texture

3) From base texture - create texture

 

Would that be the best way to achieve what I need or would it be reinventing the wheel?

[themoonrat]

You could create the sprite via

PIXI.Sprite.fromImage(url);

I'll create the sprite immediately, load the images from the url in the background, and as soon as the image has loaded, automatically update the texture to display it on screen. It does all the things you describe for you

[royibernthal]

Good to see it's already been done  I'll probably use Texture.fromImage().

In order to destroy a specific texture and its base texture, other than calling texture.destroy(true), would I also need to do:

delete PIXI.utils.TextureCache[key];
delete PIXI.utils.BaseTextureCache[key];

In other words, how do I make sure I completely free all memory related to a specific image?

[themoonrat]

you don't need to worry about the texture cache... calling destroy(true) will handle that all for you (it'll also remove that texture from the gpu memory)

[royibernthal]

Yeah I now see in the source that destroy calls Texture.removeFromCache().

Thanks, I think I got everything I need to know now.