Preloading images referenced by HTML/CSS

The playcanvas has the preload bar so we could preload the resource which import in the editor before the game start.

It’s so good.

However,because my game’s UI Start and UI End is made by html and css.

The UI images are in the cdn files instead of importing editor which make me confused and helpless.

My UI images are not in the editor so the preload bar can’t preload my UI images,so when the preload bar is completed that it maybe have some problem such as my game ui images have not been loaded.

So,I want to know is it some method to solve my problem?

The preload function have some api about preload other resource?

Why do you have your UI images on a CDN instead of in PlayCanvas?

If you put them all in PlayCanvas they would be part of the regular preload?

I know this is a good solution but I have some question about it.

Our game will be published in my country,China.

Because of the GFW (you know) the internet will be so slow when load the game.

So I have to download the game and publish it in my CDN servers to accelerate the speed of loading.

Before I download the game,I have to change the url to my CDN url.

Such as:

If I have too many css images,I have to change the url too many times.

It seems so time-consuming.

So,if I use this solution,is it some method could help my trouble?

Or has it any API like this for searching the url?

Thank you for your suggestion,dave.

There is a method to find assets by URL but I’m not sure it would be useful to you here.

One suggestion I would make is to replace tags in your HTML/CSS files with URLs at runtime. We have used this sort of thing before.

Instead of setting enter URLs in the CSS files use some other identifier for the asset (e.g. asset name or asset tag). Then you can replace all identifiers with URLs before adding the CSS to your scene.

For example, in your css file:

background-image: url("asset-tag-bkgrd");

Then in the code where you add the CSS to your html page.

// create element
var style = pc.createStyle(asset.resource || '');

// when asset resource loads/changes,
// update html of element
asset.on('load', function() {
    var bkdgrdAsset = assets.findByTag("bkgrd")[0];
    var css = asset.resource.replace("asset-tag-bkgrd", bkgrdAsset.getFileUrl());
    style.innerHTML = css;

// make sure assets loads

Of course instead of hardcoding names of tags you could use regular expressions to extract tag names from your css text and find the asset. So that the string “asset-tag-bkgrd” would automatically be replaced by the asset with the “bkdgrd” tag.


Dear dave,

Thank you for your answer.

This is my code with your suggestion.

Maybe it seems to be different from your code.

But I think they work same,isn’t it?

However,it seems that the image isn’t preloaded.

The first and the second image are preloaded when preload.

But,after the preloading,the third image is loaded.

So,I don’t solve the problem with this solution.

Then,I do this.

Yes,I add the parameter ‘‘t’’ by myself.

Then,it seems to work fine.

It doesn’t load the third image after the preloading because I use the first image which preload automatic.

1 Like

Right, OK. The t= portion of the URL is the file hash. This is used because Image elements do not reload the image if you re-assign the same image to the src value (they ignore the cache parameters) So we add the hash value to force a change if the image data has changed.

You can get this value from the asset.file.hash property.

We can look into this and see if the hash property should be removed (possible it should be from production) or whether it should be included in the getFileUrl response (I’m not sure).

But in the mean time, you can add it yourself by using asset.file.hash.


Oh,dave,I don’t know how to express my appreciation for your help.

You help me so much.

It’s very kind of you.

1 Like