Problème de chargement au démarrage de ma page HTML...?

Bonjour

Tout d'abord, je suis autodidacte en la matière. J'apprends au fur et à mesure et jusqu'à présent j'arrivais à me débrouiller, mais là je suis coincé.

Mon problème:

J'ai repris le code fournis à cette adresse pour créer une sorte de site de petite annonce grâce à Google sheets.

https://codepen.io/majorursa/pen/JozPxX

Seul problème, et qu'au démarrage de la page, pendant une seconde voir moins, la page s'affiche au niveau de sa structure bizarrement. Ça pique un peu les yeux. En faite, c'est le chargement de la page qui bug.

J'aimerais à la place qu'il y est un message de chargement comme sur l'exemple ci-dessous.
Ce lien évite ce problème en mettant à l'ouverture de la page "Chargement de la page...".
Cela doit venir d'un code JavaScript qui permet cette action pour éviter ce bug. Mais je n'arrive pas à combiner le code du premier lien donné avec le deuxième.

https://codepen.io/cwestify/pen/QaBjep

En attente du âme charitable pour m'aider

Cordialement

Salut

Pour faire ta div de loader, il te faut un .gif de loading,

le mettre en full page par dessus TOUT ton site

et puis en jquery

<div id="loading"></div>

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

function hideLoader() {
    $('#loading').hide();
}

//cache le gif quand tous est ready. 
$(window).ready(hideLoader);

// je recommande fortement car si ça bug, ou moins au bout de 20 sec ça cache quand même le gif. 20 sec c'est peut être un peu long.
setTimeout(hideLoader, 20 * 1000);

Désolé Jencal mais ta solution ne fonctionne pas. Le gif apparaît en arrière et la page se charge en même temps que le gif.

Hello,
Et il se masque bien une fois le contenu chargé ?

Si oui, tu peux essayer d'appliquer les styles en inline ?

<div style="background: url('spinner.gif') no-repeat center center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999999;"></div>

Pour éviter d'attendre le chargement de ta feuille de style externe

Ta solution Yordi ne fonctionne pas non plus.

Le gif est en arrière plan et ne se masque pas non plus.
Cela rajoute juste un gif en fond de page comme un background.

Rogoul a écrit :
Ta solution Yordi ne fonctionne pas non plus.

Le gif est en arrière plan et ne se masque pas non plus.
Cela rajoute juste un gif en fond de page comme un background.

donne nous une page de test merci

EDIT .. pas vu que tu l'avais déjà fait
Modifié par JENCAL (09 Mar 2020 - 16:36)

Rogoul a écrit :
Désolé Jencal mais ta solution ne fonctionne pas. Le gif apparaît en arrière et la page se charge en même temps que le gif.

perso. j'ai testé sur ton codepen, et cela fonctionne bien. le gif disparait au bout de 5 seconde, parce que j'ai forcé à 5 sec.

https://codepen.io/JUSEN/pen/WNvdoRp
Modifié par JENCAL (09 Mar 2020 - 16:35)

Alors en effet cela marche. Autant pour moi Jencal. T'es au top.
Par contre le gif n'est pas responsive car ma page html et faite pour une application andoid, donc smartphone. Le scroll de ma page vers le bas fonctionne pendant que le gif est en action ce qui est un peu bizarre et de plus la taille du gif ne s'adapte pas aux différentes dimensions d'un smartphone.
J'y suis presque .

As tu une idée pour régler ces derniers petits problèmes ???