Add a delay to Cesium loadingOverlay

CesiumJS
1

Dear community,

In my loadingOverlay I will have a video playing for 10-15 seconds before the cesium globe appears. I have been trying with setTimeout, but I do not know how to access the loading function. I think it has something to do with the finishedLoading function? Any help will be much appreciated:)

Here is my index file:

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="Apps/Sandcastle/Sandcastle-header.js"></script>
<script type="text/javascript" src="ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
    require.config({
        baseUrl : 'Source',
        waitSeconds : 60
    });
</script>
  
<body class="sandcastle-loading" data-sandcastle-bucket="apps/sandcastle/templates/bucket-requirejs.html">

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"> <h1>Caretaker Loading...</h1> <video autoplay width="100%"> <source src="introvideo.mp4" type="video/mp4" /></video> </img> </div>
<div id="toolbar"></div>

<!--CESIUM SCRIPT-->
<script id="cesium_sandcastle_script">
function startup(Cesium) {
        'use strict';

var viewer = new Cesium.Viewer('cesiumContainer', {
      vrButton : true,
        shadows : true,
        timeline : false,
        animation : false,
        sceneModePicker : false,
        baseLayerPicker : false
        
    });

var scene = viewer.scene;

...

//Sandcastle_End
        Sandcastle.finishedLoading();
    }
    if (typeof Cesium !== "undefined") {
        startup(Cesium);
    } else if (typeof require === "function") {
        require(["Cesium"], startup);
    }

</script>

2

Hello,

The finishedLoading function is specific to the Cesium Sandcastle application and is not related to when the globe loads. You can use css styling to hide the Cesium container until the video is finished. add style=“display:none” to the cesiumContainer div, then use some sort of timeout to show it later. Here is an example

setTimeout(function() {
document.getElementById(‘cesiumContainer’).style.display = ‘block’;
document.getElementById(‘loadingOverlay’).style.display = ‘none’;
}, 10000);

``

(Side note, you can see an example for how to create a Cesium application outside of sandcastle by following our Getting Started tutorial: http://cesiumjs.org/tutorials/cesium-up-and-running/)

Best,

Hannah