Preloading all assets

Hi there,

I would like to avoid the jumping of images when the app is loaded for the first time.
Is there a way to have the "Loading" page shown to the user until all images are loaded and show the entire app when everything is ready? I am using React demo2.

Thanks for your help!
Tamas

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

You can use the functions below to enable and disable splash screen in Metronic React version.

const enableSplashScreen = () => {
const splashScreen = document.getElementById('splash-screen')
if (splashScreen) {
splashScreen.style.setProperty('display', 'flex')
}
}

const disableSplashScreen = () => {
const splashScreen = document.getElementById('splash-screen')
if (splashScreen) {
splashScreen.style.setProperty('display', 'none')
}
}

Alternatively, you can check other loading screen examples in our Metronic HTML version layout builder.
https://preview.keenthemes.com/metronic8/demo1/layout-builder.html

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,

Thank for this, will try it out.

How would one detect if all assets and images are already loaded by the app before disabling the splashScreen? It seems that the background and some other images take more time while the components are already rendered and shown so there is a jumping of content on the page.

Thanks a lot!
Tamas

Hi Tamas,

Sorry for the late reply.

There is no built-in way to check that all images are loaded, you can check how many seconds it takes a page to be fully loaded with all images and then set loading timeout using setTimout function.

You can trigger the load of a separate image is loaded using onLoad event.

import React, { SyntheticEvent } from 'react';

const App = () => {


const handleEvent = (e: SyntheticEvent<HTMLDivElement>) => {
// remove splash screen
};

return <div src="/img.png" onLoad={handleEvent}>{/** Some code */}</div>;
};

export default App;

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(