topic Need to add in a splash screen before loading JS Application in ArcGIS JavaScript Maps SDK Questions

Need to add in a splash screen before loading JS Application

IanPeebles — Fri, 02 Oct 2015 20:16:12 GMT

Good afternoon. Does anyone have any examples of any splash screen put together that loads first, then when you click OK the javascript application loads? I have something put in place, but I have a flashing effect when the application loads that shows the text in the upper left corner before the entire application opens. Here is an example:

Re: Need to add in a splash screen before loading JS Application

TimWitt2 — Fri, 02 Oct 2015 20:24:30 GMT

Did you try and build it programmatic, like in the first example here: dijit/Dialog — The Dojo Toolkit - Reference Guide

and then in your map.on("load".... you use the myDialog.show() ?

Re: Need to add in a splash screen before loading JS Application

SteveCole — Fri, 02 Oct 2015 20:29:45 GMT

You could also make the CSS for the overall container of the map and associated divs default to "display:none" and then change the CSS display property via JS if they "accept" the splash screen notice.

Re: Need to add in a splash screen before loading JS Application

IanPeebles — Fri, 02 Oct 2015 20:43:42 GMT

This seems like an interesting idea, but do you have an example?

Re: Need to add in a splash screen before loading JS Application

KenBuja — Fri, 10 Dec 2021 21:29:56 GMT

To get around the "resolving" issue, I have a div set up to cover everything in white

<div id="outerDIV"></div>

#outerDIV {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1000;
}

And using "dojo/ready", set the display on that div to none when everything is set up.

ready(function () {
    //this hides the div created to mask the site until it's ready
    domStyle.set(dom.byId("outerDIV"), "display", "none");

An example of that (and using a dialog) is here.

Re: Need to add in a splash screen before loading JS Application

SteveCole — Fri, 02 Oct 2015 20:48:11 GMT

I'd just use the example that Ken Buja just posted. Just use his dojo/ready function code inside the click event of your "Yes- I agree" button on your splash screen.

Re: Need to add in a splash screen before loading JS Application

KenBuja — Fri, 02 Oct 2015 20:49:50 GMT

Here's another method you can use: Re: Correct Loading procedures with a splash screen?