How to do a Splash Screen in Framework7

Questions
1

I saw some prior posts regarding use of a splashscreen with Cordova. Is there a way to create a splash screen without using Cordova?

I would like to create a splash screen that goes away once the home screen is properly rendered and my initial data objects that I am using via $$.getJSON calls have all been downloaded.

(I am not using V2 yet and looking for a soluiton that would be applicable to V1 as well)

2

I figured out a solution, in case this can be further improved:

At top of index.html section add:

<div id ="cover">  <img id= "splash" src="img/logo_symbol_rgb.png">  </div>

Then in css add the following:

#cover {
position: fixed;
height: 100%;
width: 100%;
top:0;
left: 0;
background: #000;
z-index: 9999;
}

#splash {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

Then in javascript add $$("#cover’).hide() to the end of the getJSON call, such as:

$$.getJSON(‘http://sitedatasource.com/data’, function(data) {
// specific code related to the data download
$$("#cover’).hide();
}

3

I was not able to get the above solution to work in Safari on the iPhone. Apparently the $$("#cover’).hide() is not being recognized in that browser.

4

My solution with v1 & v2 was to make the default page the splash screen. This is the page that is visible without any javascript, while the page is loading. Then once everything is loaded, you can just simply change the page with javascript. In my case if they were logged in they would goto the home page, otherwise the login screen would come up.

5

Sharing the approach I took that appears to work well for enabling a splash screen on iOS device:

To add a launch screen image, simply add the following inside the in the index.html file, (assuming in this case that the launch screen image is in the img subdirectory and named launch.png).

<!-- launch screen image -->
<link rel="apple-touch-startup-image" href="img/launch.png">

In order to make this work I had to go back to the website via Safari browser and select “add to home screen” again from the bottom toolbar choices in Safari. Once I redid this, the splash screen would occur when clicking on the homescreen icon.

Note that I created a launch.png image with the exact pixel dimension of my iOS device, I have not yet tried to see what would happen with other dimensions/devices.