So fügen Sie Loader zu SmoothState.Js Seite ändern

Ich brauche Seitenladeprogramm auf jeder Seite, wenn alle Inhalte vollständig geladen sind.So fügen Sie Loader zu SmoothState.Js Seite ändern

Was ich brauche:

$(window).load(function(){ 
    $('#loading').fadeOut(); 
});

Gibt es eine Lösung, um diese einfache Funktion zu jedem Seiten zu verwenden, wenn Änderungen von SmoothState.Js

Hier ist, was ich versucht, aber nicht funktioniert:

onAfter: function($container, $newContent){ 
    $(window).load(function(){ 
    $('#loading').fadeOut(); 
}); 
}

Quelle

2016-08-17 NeosFox

Ich hatte eine ähnliche Frage und verbrachte ziemlich viel Zeit auf der Suche nach einer Lösung. Schließlich entschied ich mich, selbst eine Lösung zu finden, aber anstatt JS zu verwenden, um sie an SmoothState selbst anzuhängen, verwendete ich eine CSS-Lösung. Ich hoffe, das hilft dir und möglicherweise auch anderen, die nach dem gleichen suchen.

Mein SmoothState wird wie folgt konfiguriert:

jQuery(function(){ 
    'use strict'; 
    var $page = jQuery('#smoothStateMain'), 
     options = { 
     debug: true, 
     anchors: 'a', 
     blacklist: 'no-ajax', 
     prefetch: true, 
     prefetchOn: 'mouseover touchstart', 
     cacheLength: 5, 
     forms: 'form', 
     onStart: { 
      duration: 50, // Duration of our animation 
      render: function ($container) { 
      // Add your CSS animation reversing class 
      $container.addClass('is-exiting'); 
      // Restart your animation 
      smoothState.restartCSSAnimations(); 
      } 
     }, 
     onReady: { 
      duration: 0, 
      render: function ($container, $newContent) { 
      // Remove your CSS animation reversing class 
      $container.removeClass('is-exiting'); 
      // Inject the new content 
      $container.html($newContent); 
      } 
     } 
     }, 
     smoothState = $page.smoothState(options).data('smoothState'); 

});

Dies ist natürlich eine ziemlich normale SmoothState Konfiguration, die ‚wird Austritt‘ auf die m-Szene eingestuft Behälter auf einer Seite Übergang hinzufügt.

Das ist mein HTML ist:

<body id="body"> 
    <div id="smoothStateMain" class="m-scene"> 
     <div class="loading"></div> 
     <!-- Start body_class again for smoothState reload --> 
     <div <?php body_class(''); ?>>

das Ladesymbol ein- und ausblenden, ich folgende CSS haben:

@keyframes loading{ 
    0%{transform:rotate(0deg)} 
    100%{transform:rotate(360deg)} 
} 

@-webkit-keyframes loading{ 
    0%{-webkit-transform:rotate(0deg)} 
    100%{-webkit-transform:rotate(360deg)} 
} 

.m-scene.is-exiting .loading { 
    /* Show loader when there's no page transition */ 
    display: block 
} 

.m-scene .loading { 
    /* Hide loader when there's no page transition */ 
    display: none; 
} 

.loading { 
    /* Your loader style here */ 
    animation-duration: .5s; 

    /* Some general styling */ 
    width: 30px; 
    height: 30px; 
    border-radius: 150px; 
    border: 2px solid #000; 
    border-top-color: rgba(0, 0, 0, 0.3); 
    box-sizing: border-box; 
    position: absolute; 
    top: 10%; 
    right: 10%; 
    animation: loading 1s linear infinite; 
    -webkit-animation: loading 1s linear infinite; 

    /* To show the loader over any other elements */ 
    z-index: 9999; 
}

Entschuldigung für eventuelle schlechte-Stackoverflow-Gewohnheiten, das ist mein allererster Eintrag. Die CSS-Animation ermöglicht viel mehr Funktionen. Sie können beispielsweise die Anzeige des Ladeprogramms für einige Millisekunden verzögern, um zu verhindern, dass sie angezeigt wird, wenn Ihre Website eine Seite installatet (so dass sie nicht für sehr kurze Zeit flackert oder angezeigt wird).

Viel Glück!

Quelle

2017-01-10 11:25:19 Extricate

Um einen Loader zwischen Seitenübergängen hinzuzufügen, müssen Sie gemäß der Dokumentation des Plugins den Haken onProgress verwenden.

Erste, der eine Laders HTML und CSS zu dem Teil der Seite hinzufügen, die nicht aktualisierbar zB an der Kopf- oder Fußzeile ist, hier sind einige a nice pure CSS3 loaders, dann verstecken sie in Ihrem CSS mit display: none:

.spinner{ 
    display: none; 
}

Nun möchten Sie den Lader während der onProgress nur um zu zeigen, wie folgt:

onProgress: { 
      // How long this animation takes 
      duration: 0, 
      // A function that dictates the animations that take place 
      render: function ($container) { 
       $('.spinner').show(100); 
      } 
     },

Sie sind gut zu gehen! Denken Sie daran, dass der Loader nur angezeigt wird, wenn das Ajax-Laden Zeit braucht (wenn es langsam ist)

Quelle

2017-02-02 21:03:37

So fügen Sie Loader zu SmoothState.Js Seite ändern

Antwort

Verwandte Themen