如何加載程序添加到SmoothState.Js頁面變化

我需要頁面加載到每一個頁面時，所有內容都滿載。如何加載程序添加到SmoothState.Js頁面變化

我需要什麼：

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

是否有任何解決方案中使用這個簡單的功能，每個頁面時SmoothState.Js

這裏的變化是什麼，我試過，但沒有工作：

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

來源

2016-08-17 NeosFox

我也有類似的問題，花了相當長的一段時間尋找一個解決方案。最後，我決定自己想出一個解決方案，但不是使用JS將其附加到SmoothState本身，而是使用了CSS解決方案。我希望這可以幫助你和其他人尋找相同的東西。

我SmoothState被配置如下：

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'); 

});

這顯然是一個相當正常SmoothState配置，增加了「被出射」到第m場景在頁面轉換歸類容器。

這是我的HTML：

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

顯示和隱藏加載圖標，我有以下的CSS：

@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; 
}

請原諒我的任何壞的StackOverflow-的習慣，這是我的非常先入門。 CSS動畫允許更多的功能。例如，您可能想要延遲加載器的顯示幾毫秒，以防止它在您的網站下載頁面時顯示（以便它不閃爍或顯示很短的時間）。

祝你好運！

來源

2017-01-10 11:25:19 Extricate

添加加載頁面過渡之間，按照該插件的文件，你需要使用掛鉤onProgress。

加上一個裝載機的HTML和CSS頁面的部分是不可更新例如到頁眉或頁腳，這裏有一些a nice pure CSS3 loaders，然後用display: none它藏在你的CSS：

.spinner{ 
    display: none; 
}

現在只希望在onProgress如下展現裝載機：

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

你是好去！請記住，加載程序不會顯示，除非Ajax加載需要時間（當它很慢）

來源

2017-02-02 21:03:37

如何加載程序添加到SmoothState.Js頁面變化

回答

相關問題