How to implement SplashScreen in SAPUI5 - splash-screen

Question

Does anybody here knows how to implement a Splash Screen in SAPUI5? I have tried creating a page so that it would be the default page once the application is loaded, but there was an issue as to how to make it the default page even if another page is bookmarked. So what we did was use an image as the Splash Screen. Now the problem is the size of the image based on the device used.
Do you have any idea how we can implement this? Any idea would be of great help. Thank you so much! :)

Answer 1

Maybe Dialog control will fit your need?
Here is an example:
var oButton = new sap.m.Button({
text: "Hit Me To See Splashscreen",
press: function(){
var oDialog = new sap.m.Dialog({
stretch: true,
content:[
new sap.m.Text({text:"This is Splashscreen! Click Anywhere To Close the Splashscreen."})
]
}).attachBrowserEvent("click", function(){oDialog.destroy();});
oDialog.open();
}
}).placeAt("content");
And here is a working JSBIN example: LINK

Answer 2

I guess what you are looking for is a loading Animation on startup while loading libraries or backend-data: checkout this one, perfect guide! http://openui5.blogspot.com/2014/04/splash-screen.html

Answer 3

Thank you for your responses. I highly appreciate it. :)
Anyways, i didn't use an image nor a separate page. I just added a separate div in index.html which contains the image and the text. I added a script that will hide the div once the DOM Content is loaded.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("splashScreen").style.display = "none";
document.getElementById("content").style.display = "block";
});