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
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
