Pre loader

Discussion Ask a question
,
1

Hello,

I need to trigger the preload function on the wix site, so that when anyone accesses a page a slide appears with a promotion and the phrase LOADING, instead of the blank page.

For many this page blank while the website loads may seem like a bug and they end up leaving the page. I have the code below but I can only make it work after the page has loaded I wanted to make it work while the page loads. I looked in the API library but did not find anything, if someone could help me complete the code I thank you very much.

$w.onReady(() => {
setTimeout(() => {
showPreloader();
}, 1000);
});

Here was the code with the page elements as slide

function hidePreloader() {
$w(“#fadeContainer”).hide(‘FadeOut’);
$w(“#slideshow”).hide(‘FadeOut’).then(() => {

});

}

function showPreloader() {
$w(“#slideshow”).changeSlide(0)
.then(() => {
$w(“#fadeContainer”).show(‘FadeIn’);
$w(“#slideshow”).show(‘FadeIn’)
.then(() => {
playSlideshow();
});
});

}

function playSlideshow() {
setTimeout(toSlideN(1), 1500);

function toSlideN(index) { 
	return function() { 
		if (index >= 3) { 
			hidePreloader(); 
		} 
		else { 
			$w('#slideshow').changeSlide(index); 
			setTimeout(toSlideN(index+1), 2500); 
		} 
	}; 
}

}

2

Hi,
You can check out the preloader example here . You can click the " Open in Editor " button to view the entire code.

Good luck,
Tal,

1 Like
3

Hi,
After re-reading your question, I noticed that you mentioned that the page loads as blank before the preloader is displayed. Note that the onReady function runs when all the page elements have finished loading. Therefore, I recommend checking out these articles which can help you to detect what causes your site to load slow
https://support.wix.com/en/article/improving-your-sites-loading-time-4735844
https://support.wix.com/en/article/running-a-web-page-speed-test
https://support.wix.com/en/article/interpreting-the-results-of-a-web-page-speed-test

For further help and explanation regarding this matter, please contact Wix support .

Best,
Tal.

4

Hi Tal, that preloader example is really unhelpful. In fact, i think it seems to be just smoke and mirrors from Wix - it just adds some animation AFTER the site has already loaded most of the content. Wix needs to get its act together an add a preloader that runs in the before the page content starts loading, not after it completes. The best hack i’ve seen so far is to use this code below, though disappointing that Wix doesn’t have more native support.

https://www.futurevisionweb.com/futurecode?name=PreloaderCreator

2 Likes
5

it just adds some animation AFTER the site has already loaded most of the content.

In the example they put a top layer with the loading animation on the site that’s visible while the page loads and hide it whe the page has finshed loading… that worked for my use quite well (showing the preloader while waiting for a gallery to be filled up and loaded completely).

6

No Tal this same issue happening so many other people also
you can see the

I created a page which has repeater and it takes too long to load it takes about 10 seconds and before that is show complete white screen for 10 seconds many visitors are going away. Is there a way to create preloader which will be shown fast until the other content is loaded.and after that it automaticly to go away.
I had created the preloader but it is not working here is the code which i use
$w.onReady(() => { waitForLoading(); }); export function button6_onClick(event) { $w(’ #columnstrip1 ‘).show(); waitForLoading(); } function waitForLoading() { setTimeout(() => { $w(’ #columnstrip1 ').hide(‘FadeOut’); }, 1500); }
This pre loader is shown when the other content is shown and before that there is full white screen for 10 sec. I need something that loads prior loading the other content.
Sometimes it doesn’t shows pre loader after white screen it automatically load the content.

1 Like
7

I got the solution and the actual pre loader here is the video just watch it really helpful

6 Likes
8

That’s awesome tip! Thanks Rishabh!

1 Like
9

Works great! Thanks for sharing Rishabh!!

10

Thank you for this forum and thank you for the pre-loader example for the page. It works on the desktop but the mobile view for me. It will load the logo and the website menu, but the next thing to load is a video (very small video cover image and the video is a URL to Vimeo) and this is delayed upwards of 10 seconds + It looks like it’s not loading and leaves a white blank space - does anyone have suggestions of a pre-loader to the wix video. I have tried the preloader in the header and body start but same result. Feedback- thoughts appreciated.

11

I found the solution here

12

I do not know if you made any changes, but I tested and worked

13

This is a wonderful solution BUT it only works the first time the site is loaded. I have one page in my site which is very heavy. Any tips on how to make this preloader work on every page? Big thanks.