Are you tired of staring at a blank screen while waiting for a Wix website, decked out with all the bells and whistles, to load? As attention spans grow ever shorter, it's crucial to keep your visitors engaged right from the get-go. Enter the preloader – not just any preloader, but one that's smart enough to adapt to the user's connection speed. Today, we're diving into the wizardry of creating a custom adaptive preloader for your Wix website.
Watch the full tutorial here:
What is a Preloader?
A preloader is a nifty on-screen animation that appears while the webpage's content is still loading. It's like a friendly usher that entertains your guests while the main event is being set up. The kicker is, most preloaders are designed with a static timer – they disappear after a pre-set number of seconds regardless of whether your page has fully loaded or not. This one-size-fits-all approach can be either too long for some or too short for others. The solution? An adaptive preloader that sticks around just until the webpage is ready to be revealed, tailored to your visitors' actual loading times. Magic!
The Classic Timer-Based Preloader in Wix
In classic approaches to Wix preloaders , preloaders are set to appear for a fixed time—say, 5, 10, or 20 seconds—regardless of actual loading times. This "one-size-fits-all" approach can be problematic. For users with speedy connections, the set time might feel unnecessarily long, while for those with slower connections, it could be too short, exposing unfinished pages. Clearly, this timer-based method lacks personalization and finesse.
Nonetheless, let's create a classic preloader to start off on the same page:
This code needs to be placed in the Custom Code section in the Dashboard settings. (You can swap out the background color and url with an animation of your choice).
Exploring a Custom Element-Based Approach
To try and improve on the classical method, let's consider a preloader that adapts to actual loading times. Instead of relying on a set timer, this smart preloader would disappear once everything on the webpage is fully loaded, catering to each user's specific connection speeds. To implement this, we need to monitor the website's loading process and trigger the preloader's disappearance accordingly. A custom element can help us achieve this due to it's ability to communicate with our Velo code.
First we will add the code for our custom element into the custom elements folder in our public code files.
Then we will connect a custom element in the header to the file and tag.
On our masterpage.js we will add the following code:
// Import the 'wix-window-frontend' module to access information about the rendering environment
import wixWindowFrontend from 'wix-window-frontend';
// Wait for the page elements to load and be ready
$w.onReady(function () {
//other page code...
// Check if the rendering environment is a browser (i.e., not the editor or preview mode)
if (wixWindowFrontend.rendering.env === "browser") {
// If the environment is a browser, set the 'loaded' attribute on the element with the ID 'preloader' to 'true'
$w("#preloader").setAttribute('loaded', 'true');
}
});This approach helps solve the timing of the preloader termination by ending it after the page loads and the masterpage code runs. Unfortunately there is a delay in the preloader starting - most likely due to the loading of the custom element.
The Hybrid Approach - Crafting Your Dynamic Preloader in Wix
Let's start from scratch and build a preloader that knows when to make an exit. We'll blend both Wix classic code insertions and a custom element approach for the ultimate user experience. Grab your wizard hat, and let's get into it!
Step 1: Setting Up the Preloader Structure
First off, sidestep over to your Wix settings panel and tuck the following lines of HTML into the Custom Code section. This code will put a blanket over your webpage while the magic happens behind the scenes. (It is essentially the preloader code from the first approach without the timeout script).
<style>
body {
margin: 0;
}
#preloader {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url('YOUR_SPINNER_URL');
background-repeat: no-repeat;
background-position: center;
background-color: red;
z-index: 1000;
}
</style>
<div id="preloader"></div>Make it your own by swapping 'YOUR_SPINNER_URL' with a link to your preferred loading GIF or animation. Just like that, you have a preloader ready to work its charm from the moment the webpage starts loading.
Step 2: Stirring in the Custom Element
Next, hop back into the Wix editor and add a Custom Element from the Embed section onto your page. This little guy will be the brains of the operation – deciding when your preloader bows out.
Create a new Velo file and define a Custom Element class that listens for changes in an attribute we’ll name 'loaded'. When this Custom Element detects a change in the 'loaded' attribute, triggered by our Velo code, it will signal the preloader to disappear.
Here’s a snippet:
class CustomPreloader extends HTMLElement {
static get observedAttributes() {
return ['loaded'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'loaded') {
document.getElementById('preloader').style.display = 'none';
}
}
}
customElements.define('custom-preloader', CustomPreloader);(A simplified version of the custom element from the second approach)
Step 3: The Magic Velo Incantation
You’re close to the big reveal! Navigate to your page’s Velo code section. Import wixWindow module to ensure the code only runs on the user’s browser, not the server, and add the following sorcery to the onReady function:
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.rendering.env === "browser") {
let preloader = $w('#preloader');
preloader.setAttribute('loaded', 'true');
}
});(This part remains the same)
Step 4: Publish and Presto!
Now, publish your site and test the new setup. Your adaptive preloader should now reflect the actual load time without forcing users to wait unnecessarily or zapping them straight to the content without a preamble.
Why Go Through All This Hocus Pocus?
Simply put, you care about visitor retention. Long wait times with nothing to look at can lead to boredom and the dreaded page abandonment. By designing an adaptive preloader, you’re weaving a better user experience, keeping visitors engaged, and potentially increasing those conversion rates.
Tips and Tricks
Tinker with the styling of the preloader div to match your brand's aesthetic.
Optimize your preloader GIF or animation to be both eye-catching and quick to load (ironic, we know).
Test across different network speeds to ensure it’s working as expected. Browser developer tools are your best friends here.
Remember: Patience may be a virtue, but nobody wants to waste time waiting. So make those first few seconds count!
And there you have it, folks – your Wix website now boasts a preloader that's as savvy as a stage magician, keeping the audience captivated until the curtain officially rises. By adding this professional touch, you step up your site game and show that you value every second of your visitors' time. Happy creating, and may your load times always be short, and your user engagement long!