如何加载程序添加到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页面变化

回答

相关问题