Question

当所有内容都已满载时，我需要将页面加载器添加到每个页面。

我需要什么：

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

当通过 SmoothState.Js

进行更改时，是否有任何解决方案可以将此简单功能用于每个页面

这是我尝试但不工作的内容：

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

Answer 1

我有一个类似的问题，并花了很长时间寻找解决方案。最后，我决定自己想出一个解决方案，但是我没有使用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配置，在页面转换时将“is-exiting”添加到m-scene类的容器中。

这是我的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动画允许更多功能。例如，您可能希望延迟加载程序的显示几毫秒，以防止它在您的网站安装页面时显示（这样它不会闪烁或显示很短的时间）。

祝你好运！

Answer 2

要在页面转换之间添加加载器，根据插件文档，您需要使用挂钩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加载需要时间（当它很慢时），否则加载器不会显示

如何将加载程序添加到SmoothState.Js页面更改

2 个答案: