Pre-Loader or Loading Screen

Ask the community
,
1

Hi i want to have a pre loader or loading screen on my site 1920x1080 size basically covers up the whole screen.

I’ve been looking for a code for loading screen or a pre-loader then i encountered this.

$w.onReady(() => {
	waitForLoading();
});

export function button6_onClick(event) {
	$w('#preloader').show();
	waitForLoading();
}

function waitForLoading() {
	setTimeout(() => {
		$w('#preloader').hide('FadeOut');
	}, 1500);
}

This works wonders however if the page is longer that 1920x1080 it only covers up the first screen part and also users can just scroll down while the pre loader is loading. Is there any right way to do this?

Thank you for your help.

2

Group all the elements on your page, right click on the group, choose properties, select hidden on load.

Now all elements will be hidden when you load the page.

Just write some code now to show the group of elements after a time delay, something like so:

$w.onReady( function () {

setTimeout(() => {
$w(‘#group1’).show();
}, 3000); //this shows the group of elements after 3000 mili-seconds
})

3

Mike,
Is there a way to prevent people from scrolling while the screen is loading? I have the preloader, but even when I group the elements in the back, the user can still scroll.

4

Hi @intlblinks ,
You can use @mikemoynihan99 's answer but instead of hiding the elements onLoad you should collapse them on load.

Good luck :slight_smile:

5

Hi, Please i need help regarding preloader and loading problem,
The thing i have added a preloader in settings but once my website is loaded the problem starts then,
Going From home page to products page the website freezes until the page loads, how do i create a loading screen or preloader for this process.
basically i want a system so that when (products) button is clicked on the home page until it opens, that loading time should be in a loading screen of my gif.

Please help.

6

Please observe the community guidelines and refrain from multiple posts on the same topic or question.

You can use the techniques, described in the above post, for your site. Also, there are many threads in this forum discussing this topic. Just do a search.