Link preload SVG

Robiox
Les bases HTML/CSS

Bonjour

Je voudrais preload un svg loader (quand la page est en chargement) en faisant un link preload afin que quand la page charge, on voit en premier le loader (car actuellement on voit une micro seconde une image avant le loader du coup ça fait bizarre) mais je ne vois pas comment faire. Je me dis peut être en appelant l'id du loader ?

Voici mon loader directement dans mon fichier template.php :

<div id="loader" class="show fullscreen col-12"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#096BDC"/></svg></div>

Quand je vais dans le network du navigateur, le chemin de mon svg est : data:image/svh+xml:base64 mais du coup je sais pas quoi mettre dans le href du link preload.

Merci d'avance pour vos réponses.

4 réponses

Vincent_LETB

Bonjour,

Voici comment j'aurais fait ton loader :
Dans un premier temps le loader est present de base sur toutes les page et prend toute la page.
En CSS : 

        #loader{
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: black;
            background-color: black;
        cursor: pointer;
        transition: 0.3s linear;
        z-index: 1000;
        }

Puis en javascript j'ajoute un script qui dès que la page est totalement chargée, fait disparaitre le pre-loader par la droite par exemple.

    window.onload = function(){
        document.querySelector("#loader").style.right = "-100%";
    }

En esperant t'avoir aider au mieux :D

Robiox
Auteur

Bonjour,

Tout d'abord, merci de ton aide !
J'ai essayé ce que tu m'as dit mais ça ne change pas, j'ai toujours 2 images que je vois une micro seconde avant le loader.
Pourtant j'ai bien ajouté le CSS que tu as mis dans mon fichier CSS principal avec l'id loader et j'ai bien crée un fichier loader.js en mettant le js que tu as mis mais ça ne change pas.

Vincent_LETB

Ca peut venir du temps de chargement fichiers css, si ils sont trop lourds ou de leurs ordres de lecture.

Est-ce-que tu charges une version minifier du css ?

Robiox
Auteur

Globalement je fais appel à du CSS via link CDN en minifier oui, mais j'ai aussi un 2 ou 3 fichiers CSS dans mon répertoire qui ne sont pas minifier mais ils ne sont pas trop trop lourd normalement.