# Splash Screen
**URL:** https://forum.8thwall.com/t/splash-screen/1308
**Category:** Technical Support
**Tags:** splash-screen
**Created:** [May 7, 2024, 4:21pm UTC](https://forum.8thwall.com/t/splash-screen/1308 "2024-05-07T16:21:19Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Maria\_Paneta](https://forum.8thwall.com/u/Maria_Paneta)
#### Post date: [May 7, 2024, 4:21pm UTC](https://forum.8thwall.com/t/splash-screen/1308/1 "2024-05-07T16:21:19Z")
Hello!
My AR project starts with a splash screen, this was created according to the following project in the project library
> **[Splash Screen | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/splash-screen-aframe)**
>
> This project illustrates how to delay the initialization of the AR engine until the user clicks the "Start AR" button.
In my splash screen there is a start button, text and background image. The text and textbox loads before the image on Chrome browser. What I would like to achieve is first to load the image & text and last the button.
Any ideas on how to achieve this?
Thanks!
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [May 9, 2024, 5:11pm UTC](https://forum.8thwall.com/t/splash-screen/1308/2 "2024-05-09T17:11:12Z")
A simple solution could be just setting a settimout to the button on init() in your component. Something along the lines of:
```auto
const splashImageComponent = {
schema: {
disableWorldTracking: {type: 'bool', default: false},
requestGyro: {type: 'bool', default: false},
buttonDelay: {type: 'int', default: 2000}, // Delay in milliseconds
},
init() {
const splashimage = document.getElementById('splashimage')
const start = document.getElementById('start')
// Delay the display of the start button
setTimeout(() => {
start.style.display = 'block'
}, this.data.buttonDelay)
const addXRWeb = () => {
if (this.data.requestGyro === true && this.data.disableWorldTracking === true) {
// If world tracking is disabled, and gyro is requested
XR8.addCameraPipelineModule({
name: 'request-gyro',
requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_ORIENTATION]),
})
}
this.el.sceneEl.setAttribute('xrweb', `allowedDevices: any; disableWorldTracking: ${this.data.disableWorldTracking}`)
splashimage.classList.add('hidden') // Hide the splash image after the AR is initiated
// Play background music (mp3) after user has clicked "Start AR" and the scene has loaded.
this.el.sceneEl.addEventListener('realityready', () => {
const snd = document.querySelector('[sound]')
if (snd && snd.components.sound) {
snd.components.sound.playSound()
}
})
}
// Attach the event handler to start button
start.onclick = addXRWeb
},
}
export {splashImageComponent}
```
I hope this helps! Please let us know if you have any other questions.
---
### Author:  [@Evan](https://forum.8thwall.com/u/Evan)
#### Post date: [May 9, 2024, 9:20pm UTC](https://forum.8thwall.com/t/splash-screen/1308/3 "2024-05-09T21:20:35Z")
You could also try using the `complete` property and/or `load` event listener on the `![]()
`:
>
---
### Author:  [@system](https://forum.8thwall.com/u/system)
#### Post date: [May 14, 2024, 10:15pm UTC](https://forum.8thwall.com/t/splash-screen/1308/4 "2024-05-14T22:15:32Z")
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.