Salut les gars!

Je rencontre souvent des applications web ou mobile qui en ce chargeant, avant d'afficher le contenu, affiche à la place des barres ombragés style flat design.

Comme sur youtube et ici par exemple:

Je doute que c'est parce que c'est trop long à charger ou mon pc qui rame, alors c'est pour tenir compagnie, ça m'a l'air plutôt un truc de design.

Donc je me disais s’agit-il d'une application ou api qui fait ça? Même si je sais que je pourrais faire le même effet avec du css + js.

Merci!

-
Edité par kamoba 13 décembre 2018 à 0:10:49

Les applications qui font ça chargent la structure html seule et le contenu en parallèle avec du javascript. Tant que le contenu n'est pas chargé, un "mini css" affiche quelque chose de peu gourmand en ressource à la place du contenu. Ensuite lorsque le contenu est chargé, il prend la place dans la structure html. On peut même parfois voir sur certains sites un bloc flouté à la place des images pendant leur chargement comme sur le site medium. https://medium.com/@TheDickWard/animated-ratings-using-svg-text-clip-paths-and-why-they-dont-work-in-chrome-107676891b7e

<nav class="nav-menu">
  <ul class="nav-list">
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
  </ul>
</nav>

document.onload = () => {

  let items = document.querySelectorAll('.nav-item');
  const get_int_rng = (min, max) => Math.floor(Math.random() * (max - min) ) + min;
  // mini css
  items.forEach(item => {
    let taille = get_int_rng(50, 90);
    item.style.width = `${taille}%`;
    item.style.backgroundColor = grey;
  });

  // chargement du contenu
  let get_data = async () => {
    let response = await fetch('lien-des-elements-du-menu.json');
    let data = await response.json();
    return data;
  };

  let contenu = await get_data();
  contenu.forEach((lien, index) => {
    let a = document.createElement('a');
    a.href = lien.url;
    a.innerHTML = lien.nom;
    items[index].appendChild(a);
    items[index].style.width = '100%';
  });
}

-
Edité par Benevolar 13 décembre 2018 à 12:44:37

Salut @Benevolar, merci pour l'effort.

ça n'affiche rien, j'ai eu l'erreur: SyntaxError: await is only valid in async functions and async generators

Et je ne vois rien sur le site que t'as donné comme exemple.

Moi j'aurais mis le "mini css" par défaut donc au chargement de la page et après success de la requête Ajax() ou onload() en Jquery je chargerai l'image ou le contenu.

De toute façon comme j'ai dis le faire en js ce n'est pas un problème.

T'es sûr que ce n'est que ça? Car ce n'est pas bien nouveau cette technique du js et je ne remarque ce design que récemment.

Dis moi, ton async/await tu l'utilises partout toi? Si je ne fais pas erreur j'avais lu quelque part qu'il n'était pas compatible avec tous les navigateur ce qui m'a découragé.

Pour avoir une promise je me contente de fourrer ça dans ma fonction:

return new Promise(function (resolve, reject) {
  //....
}

-
Edité par kamoba 14 décembre 2018 à 0:30:03