Preloader to fade at custom time

Ask the community
,
1

Is anyone familiar with custom before fading? I would like my preloader to fade not by load but by time frame. Waiting for load is too quick and some elements have not even loaded yet.

Thank you!

2

Hey there,

The WixCode Preloader example demonstrates a preloader by “simulating” a slow load by using SetTimeout. You can set whatever timeout is suitable for your purposes. Is this what you’re looking for?

Yisrael

3

i can’t understand where i can paste this code !!
i need a preloader to be add to all my images

4

and i need to add a preloader to wix gallery

5

Hi Hassan,

Welcome aboard…

You should add the code to the page where your gallery is displayed. You can set the timeout to suit your needs.

Yisrael

6

@Yisrael - I already have the code that delays it until the page loads. How can I delay it for a set amount of seconds?

7

Hey,

Just use setTimeout() .
example:

const timeToDelayInMilliseconds = 1000; //this is one second
setTimeout(() => {
    //your code goes here
}, timeToDelayInMilliseconds)

Liran.

8

OK Thank you! So at this time, I have this code

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

I do not see w$ in your recommendation. Please provide advice in depth. I am a beginner in code.

9

Is ‘waitForLoading()’ doing the fade you’re talking about?
if so, you only need to delay it’s execution:

$w.onReady(() => {
	const timeToDelayInMilliseconds = 1000; //this is one second 
	setTimeout(() => { 
		waitForLoading(); 
	}, timeToDelayInMilliseconds);
});

Liran.

10

Is there any way to get preloader to show on EVERY internal page transition while my page content loads? basically I wanna do an on-click thingy for all my links where by it shows the preloader immediately while Wix takes the time to load the heavy page which appears as if nothing is happening after a typical button click to the heavier pages. Or really any other way to get the preloader to repeat itself on every single pages “waitforloading” status, not just that first view.

this only does it once.

function waitForLoading() {
    setTimeout(() => {
        $w('#pagepreloader').collapse();
        $w('#pagepreloader').hide('FloatOut',);
        }, 1500);
}