UI images loading issue

Hi, when there is a network issue on mobile, there are always some UI images that fail to upload and shows white mark in that area instead of UI images. Is there any solution by which we can restrict loading the complete scene until all the UI elements are uploaded completely?

Can you create a small demonstration of the problem please?

Sorry for the bad explanation. Let me explain with the picture


Here you can see Ui element is not loaded due to network issues. So my question was is there any way that scene loads completely only after all the UI elements have been loaded.

A common practice is to have that UI element disabled first, and enable it in the image onload callback.

image.crossOrigin = "anonymous";
image.onload = function () {
    var texture = new pc.Texture(this.app.graphicsDevice);
    texture.setSource(image);
    myElement.element.texture = texture;
    myElement.enabled = true;
};
image.src = "https://...";

That way, if the image will not load, the element will remain invisible.

1 Like

Are the UI images in the project as assets or are they externally hosted?

Yes it happens with me as available @yaustar basically the assets are inside the playcanvas folder and the preload option is ticked, what happens is that some textures or pictures are not loaded if you have a slower connection and it shows white image instead.
It is difficult to reproduce unless you have a slow connection and the project has alot of assets.

What type of asset are the UI elements using? Texture, Sprite, Material?

Texture.

1 Like

@yaustar UI images are within the project and are of texture type.

1 Like

Does the UI element ever load or does it stay white forever?

Sometimes it stays forever and i have to reload. And sometimes UI element shows after few seconds. I guess it depends on the network speed.

Thanks, I’m going to try to repo this and I will log an issue if I can.

1 Like

Could you give me read only access to the project that has this error please? I’m having trouble reproducing it on my end :frowning:

Username yaustar

Unfortunately, won’t be able to give that :frowning: . It can be only be reproduced if your project size is more than 50 mb and also there is a poor network connection.

Hello @saif!

@yaustar You can simulate a poor network connection with dev tools.

But why should the assets not load if they are preloaded (by the engine at start time)? It would mean the loading screen ignores the load-states of these textures which does not sound very reasonable.

Did you try @LeXXik suggestion to see if it resolves the issue?

How big are the UI Textures?

@Sebastian Texture’s sizes are between 1kb to 200 kb. Have tried @LeXXik suggestion and by applying that, image never shows in the first place, not even the white mark.

I have searched this issue and ts due to the network time taken in loading all the assets. My project loading time on the medium device is 3-7 minutes approximately.

If network speed is good then it loads in 1 minute and shows every image correctly.

Just wanted to know how every image without white mark can be shown when there is low network speed.

Hey @saif! Thanks for the detailed reply :slight_smile: This helps a lot in remote debugging the issue… :beers:

3-7 minutes almost sound like timeout issues.

Is your target user group in areas with low bandwidth? Then you should drastically lower your image resolutions and data footprint. An app should load within seconds - not minutes.

I think the base PC engine ist around 1mb. If the textures are between 1kb and 200kb then what is taking up so much space (50mb) and is there a possibility to reduce that size?

Cheers and good luck!

The thing is that I don’t expect the app to start in a timeout scenario. The preloader shouldn’t proceed on a failed load.

I haven’t been able to replicate this on desktop with Network Conditioner or the Chrome Devtools hence the ask for a project that is known to fail.

Are the textures compressed to ETC/PVR within the editor?

Hey @Sebastian its the models which are taking too much space. I already reduced its size from 140 mb to 50 mb and it won’t be reduce anymore.

And yes my target user group is low end devices with low bandwidth areas.

I am going to implement lazy loading today. Will update you if that worked (y)

I was thinking the same that if images are not uploaded properly build shouldn’t run in the first place. But if it does then maybe after 5 minutes, it should show the clear image instead of white marks.

Anyways i am going to implement lazy loading today. Will update if that worked. Cheers :slight_smile: