jquery-plugin Pace.js funktioniert nicht

bin ich mit dem jquery-plugin pace.js und ich möchte, dass wenn die Seite geladen ist dann erstmal die progress-bar wird geladen, danach wird der Inhalt angezeigt,
das ist mein code

<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>

den jsfiddle definieren das Ergebnis meiner Arbeit.

in meinem Fall den Inhalt und die Fortschrittsanzeige beide anzeigen gleichzeitig.

, Was ich will: ich möchte, dass zuerst der Fortschrittsbalken zeigt und nach dem complition der Fortschrittsbalken wird der Inhalt zeigen wie in diese website.

Update:

Dies ist, was ich als Nächstes versuchen, aber wenn der Fortschritt abgeschlossen ist, dann wird es nicht zeigen, keine Inhalte...

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>bk</title>
      <link rel="stylesheet" href="css/pace-atom.css"/>
      <style>
         #contents {
             display: none;
         }
         .cover {
             position: fixed;
             left: 0px;
             top: 0px;
             width: 100%;
             height: 100%;
             z-index: 1999;
             background:rgb(33,33,33);
         }
      </style>
   </head>
   <body class="pace-done">
      <div class="pace  pace-inactive">
         <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
            <div class="pace-progress-inner"></div>
         </div>
         <div class="pace-activity"></div>
      </div>
      <div>
         <div id="contents">
            <img src="d3.jpg" alt=""/>
            <img src="d1.jpg" alt=""/>
            <img src="d2.jpg" alt=""/>
            <img src="d2.jpg" alt=""/>
            <img src="d1.jpg" alt=""/>
         </div>
      </div>
      <script src="js/pace.js"></script>
      <script type="text/javascript">
         $(function() {
             Pace.on("done", function(){
                 $("#contents").fadeIn(1000);
             });
         }

      </script>
   </body>
</html>
InformationsquelleAutor | 2015-02-07
  1. 3

    Okay, also ein einfacher Weg, um dies zu implementieren ist, sich zu verstecken alle Ihre Inhalte bis Tempo fertig ist laden (ich nehme an, es ist eine Argumentation auf Tempo load-Bildschirm, aber ich bin mir nicht sicher).

    So Ihren Inhalt haben könnten-id #contents und werden standardmäßig display: none. Sie können dann zeigen Sie den Inhalt nach dem Schritt ist getan, wie so

    $(function() {
    Pace.on("done", function(){
        $("#contents").fadeIn(1000);
    });
});

    Hier ist ein Turnschuh, dass es funktioniert http://jsfiddle.net/59caubpx/3/

    • wo in deinem html-bringen Sie die JS? Es werden nach dem pace.js JS einfügen und im Idealfall am Ende der Seite. An der fiddle das JS ausgeführt wird, auf die Seite laden, so versuchen Sie meine bearbeitete Antwort. Andere als die, die sich erinnern, alle Ihre Inhalte werden soll, eingewickelt in ein div mit id='contents die css-set zu display: none.
    • Danke für deine Wiederholung, ich vergaß hinzuzufügen jquery.js Datei....
    • können Sie mir bitte sagen, wie zur Verringerung der Fortschritt ist mit der Geschwindigkeit? Fortschritt bedeuten die Zeit, standardmäßig ist es schneller laufen..
    • ja, ich möchte abnehmen den Fortschritt beschleunigt, so dass der Benutzer die loading-screen für lange Zeit
    • Ich bin mir nicht sicher, wie Sie Sie verlängern die Ladezeiten. Ich rate Ihnen, schauen Sie in die Dokumentation: github.hubspot.com/pace
    InformationsquelleAutor Deepak
  2. 14

    Wenn der Fortschrittsbalken stecken bei 99%, und wenn Sie Visual Studio verwenden, müssen Sie deaktivieren Sie 'Aktivieren Sie Browser-Link-option. Diese zu lösen, wird die unvollständige Fortschrittsbalken Problem.

    jquery-plugin Pace.js funktioniert nicht

    • Ja, dies löste das Problem für mich.
    • Viel Spaß beim Programmieren 🙂
    • Ich nehme an, dies ist, weil es schafft eine WebSocket-Verbindung, das ist eine Anforderung, die nicht wirklich "abgeschlossen", sondern bleibt aktiv.
    InformationsquelleAutor Arunjith R S
  3. 2

    Bitte überprüfen Sie, dass alle hinzufügen die Datei richtig, wie jquery.js oder Thema.atom.css oder pace.js etc...

    InformationsquelleAutor
Schreibe einen Kommentar