Loader Concept
The Loader concept initiates a preloading animation and the download of your fonts, images, videos and audios. At the same time, it help you to make sure you have your downloads and somethings you need before allowing visitors to navigate.
You'll find the preloader HTML in
src > front > template > index.php
.You'll find the preloader SCSS in
src > front > scss > site > _preloader.scss
.You'll find the preloader JavaScript in
src > front > js > addons > Loader.js
How to download medias
Fonts: if you give the browser the opportunity to see your fonts, e.g. by adding these with
@font-face
in yourCSS
, the system will download what he can found.Images, audios and videos (medias): For download a media, you need to add it to your global variable
MEDIAS
that you can find insrc > back > theme > functions.php
:
How to display medias For deal with the display of medias without recreate the code to do that each time its required, we provide you a "short thing to do" in three steps:
First of all, we need to know where you want to display your element. So if you put a look on the code above, you can see a non-require parameter named
target
with some media. The value need to be a selector. ... The selected element will be replaced by the media html element created pending the download.When components are rendered, we don't check if you have medias to display. If you need to display medias, you need to associate your component with each media group you need. For do that, add this HTML per group you need with your component:
<scg-load data-value="YOUR_MEDIA_GROUP_KEY" />
After you have associate your media groups, process to the display with this JavaScript function:
window.loader.downloader.display()
When you render a component, it's likely rendered alongside other components. If you have multiple display functions, you don't want to pass through each <scg-load> every time you call window.loader.downloader.display(). If having multiple display functions is unavoidable, be more specific by adding a first parameter to .display() to indicate which <scg-load> element's data-value you want to target. Like:
Add validations
Put a look on how we initiates the concept in src > front > js > App.jsx
:
Now, put a look on your preloading animation in src > front > js > addons > Loader.jsx
, you'll find this part of code:
On this code, you can understand that the preloader animation will restart if you don't have some parameters to true
. You can extend the validation with your own parameters.
Promise
All methods implemented with the Loader object are using a Promise
:
window.loader.anim.then(() => {})
allow you to know when your preloader animation is resolvedwindow.loader.medias.then(({ mediaGroups, fonts }) => {})
allow you to play with images, videos, audios and fonts when they are readywindow.loader.downloader.display()
allow you to display images, videos and audios when they are ready. Place your display function in a variable nameddisplayFunc
and usedisplayFunc.then(() => {})
for call something when all medias are displayed.
Last updated