Masquer la page en cours de chargement avec pace.js

Je travaille avec le rythme, une page de chargeur, et il fonctionne très bien. Mais je n'arrive pas à comprendre comment masquer l'ensemble de la page, à l'exception de la barre de chargement pendant le chargement de la page, et de montrer une fois le chargement terminé. Des idées?

double possible de pace.js "tout Cacher, mais le RYTHME jusqu'à ce que la page est entièrement chargée" copie locale

OriginalL'auteur user3052215 | 2014-03-09

12

Je sais c'est un vieux post, mais je suis tombé sur cette question tout à l'heure et trouvé une autre solution possible 🙂

Caché dans le Rythme de la documentation est le Rythme.sur(). Vous pouvez l'utiliser pour lier les événements répertoriés dans la documentation, comme suit:
```
Pace.on("done", function(){
    $(".cover").fadeOut(2000);
});
```
OriginalL'auteur wyzkid207
8

J'ai résolu ce problème en utilisant le code suivant.
```
.pace-running > *:not(.pace) {
  opacity:0;
}
```
comme display:none était à l'origine un problème avec l'alignement dans les cartes google maps sur la page. cela fonctionne parfaitement et le besoin d'ajouter un peu de transition.

OriginalL'auteur Jakki
5

Vous n'avez pas besoin de masquer la page. Il suffit de faire un élément fixe qui couvre votre page sans la montrer, ensuite fondu avec le chargement de la fonction.
```
$(window).load(function() {
        $(".cover").fadeOut(2000);
    })

.cover {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1999;
    background:rgb(33,33,33);
}
```
Et vous pouvez ajouter un chargement .gif ou quelque chose dans le conteneur, il disparaîtra lorsque votre page est complètement chargée.

OriginalL'auteur Rodrigo Zuluaga
3

Je sais que cette question est assez vieux, mais j'ai réussi à le faire fonctionner avec un petit bloc de CSS.
```
.pace-running > *:not(.pace) {
  display: none;
}
```
Ceci utilise la classe que le RYTHME des endroits sur la <body> élément pendant le chargement de la page est dans le processus. Prendre note, cela peut faire la page de disparaître pendant de longues requêtes AJAX... Vous pourriez probablement obtenir autour de que par faire un peu de Javascript pour vérifier la .pace-running classe à être retiré de la <body> élément. Si vous n'avez pas de demandes XHR, cependant, vous devriez être bien avec tout cela.

OriginalL'auteur deansheather
2

Pace.js ajoute vraiment une classe au corps. 'la vitesse d'exécution" est ajouté alors que le rythme est active, remplacé par l'apce fait quand il est terminé.

Vous pouvez certains css, alors:
```
.pace-running{
  opacity: .67;
  background-color: #2E2E2E;
}
```
Vous pouvez éditer le code ci-dessus en fonction de vos besoins.

OriginalL'auteur anurag619
1

Si vous décidez de ne pas utiliser l'opacité, vous pourriez essayer:
```
.pace-running {
    background: rgba(250,250,250, 1);
    color: rgba(200,200,200, 1);
}
```
Moins de code nécessaire pour réduire la visibilité ou de masquer l'arrière-plan de la page, tandis que Pace.js est en cours d'exécution

OriginalL'auteur Anthony

Essayer ci-dessous un exemple simple et facile....

trouver l'id d'ensemble pour toute la page conteneur div

<body>
    <div id="pagecontent">
        Loaded asdasdas das das
        dasd
        asd
        asdasdasdasdasdasdasdasdasd

    </div>
</body>

après mettre cette css est basé sur ce que vous avez mentionné dans toute l'ID de conteneur

#pagecontent {
opacity: 0;
}
#pagecontent {
-webkit-transform: opacity 0.5s ease;
-moz-transform: opacity 0.5s ease;
-o-transform: opacity 0.5s ease;
-ms-transform: opacity 0.5s ease;
transform: opacity 0.5s ease;
}
body.pace-running #pagecontent {
opacity: 0;
}
body.pace-done #pagecontent {
opacity: 1;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 5px;
width: 200px;
background: #fff;
border: 1px solid #f2851f;
overflow: hidden;
}
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: translate3d(0, 0, 0);
-moz-transition: translate3d(0, 0, 0);
-ms-transition: translate3d(0, 0, 0);
-o-transition: translate3d(0, 0, 0);
transition: translate3d(0, 0, 0);
max-width: 200px;
position: fixed;
z-index: 2000;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: #f2851f;
}
.pace.pace-inactive {
display: none;
}

ARY:

http://jsfiddle.net/686rugps/

Dans #pagecontent {}, ne devrait-elle pas être transition au lieu de transform?

OriginalL'auteur Stack Overflow User

Vous devez vous connecter pour publier un commentaire.