Help : Creating a splash screen on electron


#1

Hello guys. I wonder if you have a functional splash screen. the main window should communicate with the splash screen to send information about loaded modules into the html scripts.

Any help is very appreciated. thanks.


Main process before initialization
#2

I also wonder how can be the splash screen simulated in Electron. Thanks for ideas!


#3

It should be quite easy with the given set of functions. In your main.js file you will just open up a ‘slash-screen’ window in the app.on(‘ready’) event handler. After finishing your initialization you can close the ‘splash-screen’ window and open up your main window…


#4

@appelgriebsch But how do you detect when it’s done initialising?


#5

There are two things that you have to consider:

  1. your main screen must be hidden, loading all the libraries you need in your project.
  2. then upon event of loading each library, you use an IPCRenderer to the main process.
  3. then an IPCMain process captures the data of the front end request and pass it to the splash screen
  4. the splash updates.

if you finish all the process of loading elements, you destroy the splash window, then you show the main window.


#6

You could load 2 window2, 1 main (hidden) and 1 loading. And when main windows loads fully, then show it.

Example: https://github.com/buz-zard/random/tree/master/electron-compile-1


#7

I am really struggling with this. I have a loading.html page that I want to load before the main browser content loads. The main browser contains a sidebar.html on the left, and a webview on the right.

I’d like to display my loading.html ONLY until the webview page has been loaded completely. I’ve tried utilizing jquery, splash(3000) along with a JS script to make a white screen disappear on load, and a variety of CSS tricks and am getting nowhere (splash(3000) is effective in that it keeps browser white during load, but ultimately I need to display my loading gif instead of white screen). I tried the example that @buz-zard suggested but I do not want to load two separate windows, I need a seamless experience for the webview content.

Any help?


#8

@supernatural If you don’t want two seperate windows than you can you can handle it complete in the render process.
You can use the HTML5 Filereader API for loading the loading.html like in this example: http://www.dotnetobject.com/Thread-reading-text-file-with-javascript-using-html5-FileReader
for this disable the show of your normal content and after a delay for your loading.html you can show it and hide the loading.html content.

I think another possibility is to use the .loadURL in the main-process twice with a timeout.


#9

A simple splash screen for electron could be something like

app.on('ready', () => {
  // create main browser window
  mainWindow = new BrowserWindow({
      titleBarStyle: 'hidden',
      width: 1920,
      height: 1080,
      show: false // don't show the main window
  });
  // create a new `splash`-Window 
  splash = new BrowserWindow({width: 810, height: 610, transparent: true, frame: false, alwaysOnTop: true});
  splash.loadURL(`file://${__dirname}/splash.html`);
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  
  // if main window is ready to show, then destroy the splash window and show up the main window
  mainWindow.once('ready-to-show', () => {
    splash.destroy();
    mainWindow.show();
  });
});

#10

can we set time interval to splash screen in electron