Splash Screen

🧑‍💻 Technical Support
1

Hello!

My AR project starts with a splash screen, this was created according to the following project in the project library

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!

2

A simple solution could be just setting a settimout to the button on init() in your component. Something along the lines of:

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.

3

You could also try using the complete property and/or load event listener on the <img>:

2 Likes
4

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.