nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Building a splash screen to tell the user the application is loading?

ipeebles

I am interested in building a splash screen that tells the user that the application is loading. When the application is finished loading, I am wanting the screen to disappear. Has anyone put something like this together?

I am looking at something similar to what the Silverlight Viewer displays.

Any assistance will greatly be appreciated.

Vind meer berichten getagd met

Accepted answers

BradleyNeish1

Thanks. Will this only appear when the application is first loaded? I don't want it to show up each time a user makes a zoom or pan on the map.

Yes this only appears when the application first loads.
From the reference: the map.on load event "Fires when the first or base layer has been successfully added to the map".
Depending on your specific application and the size/# of your layers you might be better served with the map.on layers-add-result event("Fires after all layers are added to the map using the map.addLayers method").

All comments

BradleyNeish1

to accomplish this I have a [HTML]<div id="wait" class="esriSimpleSlider">
<img src="ajax-loader.gif">
</div>[/HTML] that shows in the center of the screen.
Then using the map.on load event (which fires when the application has finished loading) i hide it.

loading = dom.byId("wait");
map.on("load", function() {
esri.hide(loading);
//other stuff
});

There are probably more elegant ways of doing this, but I hope this helps.

kenbuja

Here's a sample that shows how to do that with a gif and here's one with text.

ipeebles

to accomplish this I have a [HTML]<div id="wait" class="esriSimpleSlider">
<img src="ajax-loader.gif">
</div>[/HTML] that shows in the center of the screen.
Then using the map.on load event (which fires when the application has finished loading) i hide it.
loading = dom.byId("wait");
map.on("load", function() {
esri.hide(loading);
//other stuff
});
There are probably more elegant ways of doing this, but I hope this helps.

Thanks. Will this only appear when the application is first loaded? I don't want it to show up each time a user makes a zoom or pan on the map.

ipeebles

Here's a sample that shows how to do that with a gif and here's one with text.

That isn't quite what I am looking for. This animated .gif shows up when the application loads and when the user performs a zoom or pan on the map. All I need is to have a screen come up one time each time the application is opened in the browser.

BradleyNeish1

Thanks. Will this only appear when the application is first loaded? I don't want it to show up each time a user makes a zoom or pan on the map.

ipeebles

Thanks for all of the replies.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.