web-dev-qa-db-fra.com

Masquer la page jusqu'à ce que tout soit chargé Avancé

J'ai une page Web qui utilise largement jQuery.

Mon objectif est de n'afficher la page que lorsque tout est prêt.

Avec cela, je veux éviter de montrer le rendu de page ennuyeux à l'utilisateur.

J'ai essayé jusqu'à présent (#body_holder Est un wrapper à l'intérieur body):

$(function(){
    $('#body_holder').hide();
});
$(window).load(function() {
    $("#body_holder").show();
});

Cela fonctionne parfaitement, mais gâche la disposition.

Le problème est que masquer le wrapper interfère avec les autres fonctions et plugins jQuery utilisés (par exemple le plugin de mise en page).

Je suppose donc qu'il doit y avoir une autre astuce pour ce faire. Peut-être déposer une image ou diviser sur le corps jusqu'à ce que window.load se soit produit?

Quelles approches utilisez-vous?

MODIFIER:

La solution doit très probablement être d'une autre manière que display:none Ou hide();

javascriptjquerydocument-ready
33
Email

Tout ce qui est fait avec jQuery devra normalement attendre document.ready, ce qui est trop tard à mon humble avis.

Mettez un div sur le dessus, comme ceci:

<div id="cover"></div>

définir certains styles:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

et cachez-le avec JS lorsque tous les éléments sont chargés:

$(window).on('load', function() {
   $("#cover").hide();
});

Ou si, pour une raison quelconque, votre script utilise encore plus de temps que les éléments DOM à charger, définissez un intervalle pour vérifier le type de fonction qui se charge le plus lentement et retirez le couvercle lorsque toutes les fonctions sont définies!

$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

//stackoverflow does not fire the window onload properly, substituted with fake load

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>simple</li>
    <li>test</li>
    <li>of</li>
    <li>a</li>
    <li>cover</li>
</ul>

<div id="cover">LOADING</div>
46
adeneo

Voici une solution jQuery pour ceux qui recherchent:

Masquez le corps avec css puis affichez-le après le chargement de la page:

CSS:

html { visibility:hidden; }

Javascript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

La page passera de vierge à afficher tout le contenu lorsque la page est chargée, pas de flash de contenu, pas de chargement d'images en cours de visualisation, etc.

28
hawkeye126

Vous devriez essayer de définir la visibilité sur caché au lieu de l'affichage: aucun. La définition de la visibilité sur caché conservera toutes les positions et dimensions de tous les éléments, donc cela ne devrait pas créer de problèmes de mise en page.

25
Igor Jerosimić

Votre question est valable, mais je ne voudrais pas me cacher ou couvrir la page pendant que les choses tournent.

Cela empêche l'utilisateur de comprendre ce qui se passe sur la page. Bien que de nombreuses choses puissent devoir être chargées, différentes parties de la page devraient prendre vie au fur et à mesure qu'elles sont chargées. Vous devriez vous entraîner à verrouiller les commandes qui ne sont pas prêtes, en affichant peut-être un spinner ou un autre indicateur de progression par-dessus. Ou définissez cursor sur wait lors du chargement des éléments.

Cela garde l'utilisateur dans la boucle et lui permet de voir et d'interagir avec les pièces lorsqu'elles sont en ligne au lieu de masquer toutes les pièces jusqu'à ce que tout soit prêt.

Vous voudrez normalement charger les choses auxquelles l'utilisateur a besoin d'accéder le plus rapidement, généralement au-dessus du pli, en premier. Le chargement est une priorisation qui peut facilement être coordonnée avec Promises.

À tout le moins, voir la page permet à l'utilisateur de se repérer et de décider quoi faire. Soyez transparent.

2
Mario

Commencez votre HTML avec:

<body style="opacity:0;">

À la fin de votre script:

document.body.style.opacity = 1;

1
José María Sánchez Ruiz

Je cherchais une solution non javascript, alors j'en ai trouvé une qui fonctionne sur la plupart des navigateurs de manière acceptable.

Étant donné que l'ordre de chargement des règles CSS est important;

  • Définissez la classe de masquage dans le premier fichier CSS ou en ligne dans head.
.hidden-onpage-load{ display: none; }
  • Dans le corps, la classe peut être utilisée comme
<div class="hidden-onpage-load"> ... </div>
  • Redéfinissez-le en ligne ou dans un fichier CSS après le chargement de tous les autres fichiers CSS et JS
.hidden-onpage-load{ display: block; }
1
Sami Altundag

La solution la plus simple que j'ai trouvée consiste à envelopper le corps dans un comme suggéré précédemment, mais à le définir comme masqué dès le départ, puis à utiliser JQuery (ou javascript) pour afficher à la charge une fois tous les composants chargés.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bodyDiv" hidden>

Hello World!

</div>
<script>
$(document).ready(function() {

  // add JQuery widget loads here
  
  $("#bodyDiv").show(); // reveal complete page
})
</script>
0
will