[SOLVED] Preloading screen shows up very late

Ah I see. In which, it’s going to have to require someone your team to debug the loading of the page to see what is taking up the time before the splash screen is shown.

If it can be reproduced in a project that can be made public or a private project that doesn’t need an NDA, I be happy to take a look.

Things that I would also check:

Has the loading script been assigned in the project settings to be the loading script?

Is the script the problem or the project? Is this reproducible in a new project with the same loading script?

1 Like

yes the loading script is assigned.
Of course in an empty project everything would be fine as there is nothing to load.
We made some projects (but the other ones ore smaller) and there it is the same.

Anyways, we are paying customers and as far as I see this we would need some help in teaching/optimizing from experts.

Who would I have to adress (and legal issues will remain )

I can’t post project specific issues here.

1 Like

@will, what is our stance on NDAs to help out with projects?

1 Like

Could you load up a project with a bunch of open domain images, models etc? Or grab a bunch of assets from the PlayCanvas store?

1 Like

You can also email support@playcanvas.com if you wish to discuss this off the forums.

1 Like

that would just illustrate the loading issue, but we have way more problems.

I guess I could create a project with dummy files which would illustrating the issue.

And then? just add yaustar?

1 Like

Or make it public as the assets are open domain so there shouldn’t be any IP issues

1 Like

With the other problems, we are happy to review but please keep in mind that we don’t really provide 1-1 support for all our customers and may refer users to a PlayCanvas expert contractor depending on the scenerio.

1 Like

ok i will set up something. Will take a while

1 Like

Here is a project with about 30MB of data that you can fork and plug in your loading script: https://playcanvas.com/project/771832/overview/lots-of-assets

1 Like

I’ve just re-read this. What do you mean by ‘loader scene’? The script and usermanual page that was linked is referring to the preloader, not creating a scene for loading.

1 Like

However, in a current project it takes up to 30 seconds or so until logo and loading bar appear

In your loading script code it looks like the splash is hidden until your logo has loaded , even though the preloading is progressing.

            logo.onload = function () {
                splash.style.display = 'block';

So it looks like the logo is taking a long time to load.

Couple of ideas: (but I’m not an expert )

  • Could the other assets that are already being loaded by the app be blocking the img load so it gets loaded last?
  • img.src will cause the image to start loading, but if its cached will the onload event fire before you register the function to handle it?

Having another read of the loading script and trying to identify issues.

There is this part of code that attempts to get an asset and use it as the logo:

var logoAsset = app.assets.find('EnBW_Space_Academy_Logo_Blau_RGB.png');
        if (logoAsset) {
            var logo = document.createElement('img');    
            logo.src = logoAsset.getFileUrl();

It’s possible that the image is stuck behind all the HTTP requests that are performed during the preloading step.

This would mean that the logo won’t show till later in the preloading stage.

I suggest changing this to use a Base64 URL for the logo.src which will ensure that the logo will be present before the assets are preloading.

That said, the progress bar should still be updated even without a logo :thinking:

1 Like

The progess bar is hidden because it’s inside the splash and the splash is hidden until the logo is loaded.


@Kulodo133 Good catch, I see what you mean now.

@Marjan, @Kulodo133 has nailed it. If we change the loading script to:

pc.script.createLoadingScreen(function (app) {
    var showSplash = function () {
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        splash.style.display = 'none';
        var container = document.createElement('div');
        container.id = 'progress-bar-container';

        var bar = document.createElement('div');
        bar.id = 'progress-bar';


    var hideSplash = function () {
        var splash = document.getElementById('application-splash-wrapper');

    var setProgress = function (value) {
        var bar = document.getElementById('progress-bar');
        if(bar) {
            value = Math.min(1, Math.max(0, value));
            bar.style.width = value * 100 + '%';

    var createCss = function () {
        var css = [
            'body {',
            '    background-color: #fff;',

            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-color: #fff;',

            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 132px);',
            '    width: 264px;',
            '    left: calc(50% - 132px);',

            '#application-splash img {',
            '    width: 100%;',

            '#progress-bar-container {',
            '    margin: 20px auto 0 auto;',
            '    height: 2px;',
            '    width: 100%;',
            '    background-color: #000099;',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: #ff9900;',
            '@media (max-width: 480px) {',
            '    #application-splash {',
            '        width: 170px;',
            '        left: calc(50% - 85px);',
            '    }',

        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {



    // Use an image from the assets in the project via the asset registry
    // More information: http://developer.playcanvas.com/en/api/pc.AssetRegistry.html
    app.on('preload:start', function() {
        var splash = document.getElementById('application-splash');
        var logoAsset = app.assets.find('EnBW_Space_Academy_Logo_Blau_RGB');
        if (logoAsset) {
            var logo = document.createElement('img');    
            logo.src = logoAsset.getFileUrl();

            // Insert DOM before the progress bar
            if (splash.childNodes.length > 0) {
                splash.insertBefore(logo, splash.childNodes[0]);
            } else {
        splash.style.display = 'block';
    app.on('preload:end', function () {
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);

The loading bar will show as expected but the logo will pop in/load when it is ready like this:

If we change the logo.src to a base64 string, for a little bit of extra data, we can have the logo ready right at the start like so.


Thanks guys, I didn’t expect that much help for such an “off” topic post.

Using Yaustars latest code it seems to work and a using base64 loading image this indeed working as expected.

Strangly enough I am unable to see the differences from old to new code, even when using XCodes Filemerge compare function. Guess I have already overwritten old files. hmmm.

Anyways, I guess I fetched the old script from here:

So somebody should update this as well, or others run into the same issue.

Thanks a lot, this Post can be marked as solved!

1 Like

Oh god, I wrote that project back in 2016 :eyes:

Yeah, I will update! Thanks for linking back to where the original code was

Edit: Updated tutorial