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 your CSS, 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 in src > back > theme > functions.php:

  /*
  * medias
  *
  * $medias = [
  *     'home' => [
  *         [
  *             'type' => 'video',
  *             'target' => '',
  *             'src' => ''
  *         ],
  *         [
  *             'type' => 'image',
  *             'target' => '',
  *             'src' => ''
  *         ],
  *         [
  *             'type' => 'audio',
  *             'src' => ''
  *         ],
  *     ],
  *     'about' => [
  *         [
  *             'type' => 'video',
  *             'src' => ''
  *         ],
  *     ],
  * ];
  */
  
  $medias = [];
  
  wp_localize_script('scg-main', 'MEDIAS', $medias);

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:

1. 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.

2. 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" />

3. 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:

<scg-load data-value="my-value" />
window.loader.downloader.display('my-value')

Add validations Put a look on how we initiates the concept in src > front > js > App.jsx:

import Loader from './addons/Loader';

window.loader = {
    anim: Loader.init(),
    downloader: Loader.downloader(),
    isLoaded: {
        fonts: false,
        images: false,
        videos: false,
        audios: false
    }
};
window.loader.medias = window.loader.downloader.init();

Now, put a look on your preloading animation in src > front > js > addons > Loader.jsx, you'll find this part of code:

.add(() => {

    /*
    * If medias not loaded, restart
    */
    if(
        
        !window.gscroll

        || !window.loader.isLoaded.fonts

        || !window.loader.isLoaded.images

        || !window.loader.isLoaded.videos

        || !window.loader.isLoaded.audios

    ){

        tl.restart();

        return;

    }

})

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 resolved

• window.loader.medias.then(({ mediaGroups, fonts }) => {}) allow you to play with images, videos, audios and fonts when they are ready

• window.loader.downloader.display() allow you to display images, videos and audios when they are ready. Place your display function in a variable named displayFunc and use displayFunc.then(() => {}) for call something when all medias are displayed.