SmoothStateJS：如何防止页面更新时元素刷新？

我正在使用SmoothState.Js在点击上加载新页面。由于在这些页面中的每一个上，徽标都保持在相同的位置/大小，因此我希望徽标不会刷新，也不会在页面上发生变化。SmoothStateJS：如何防止页面更新时元素刷新？

我的菜单中的链接不刷新，但徽标确实。我没有看到任何文档或谷歌解决这个问题..我会如何在这些Ajax页面变化之间随时保持一个图像？

这里是SmoothState电话：

$(function() { 
    $('#main').smoothState(); 
}); 

$(function() { 
    "use strict"; 
    var options = { 
      prefetch: true, 
      pageCacheSize: 4, 
      onStart: { 
       duration: 300, // 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 = $("#main").smoothState(options).data("smoothState"); 
});

的HTML：对于SmoothState

<header class="header"> 
     <div class="main-logo"> 
      <a class="svg" href="www.site.com"> 
       <object class="willItBlend" data="../svg/main-logo.svg" type="image/svg+xml"></object> 
       <img class="blender" src="../svg/main-logo.png" /> 
      </a> 
     </div> 
     <nav class="main-nav-about"> 
      // links go here 
     </nav> 
</header>

可用事件调用：

onBefore - Runs before a page load has been started 
onStart - Runs once a page load has been activated 
onProgress - Runs if the page request is still pending and the onStart animations have finished 
onReady - Run once the requested content is ready to be injected into the page and the previous animations have finished 
onAfter - Runs after the new content has been injected into the page and all animations are complete

来源

2016-02-26 Pascal Tremblay

你需要使用 '黑名单' 选项，在文档中指定：

一个jQuery选择器，指定smoothState元素中的哪些元素应该被忽略。这包括表单元素和锚点元素。

只需添加这选项对象blacklist: '.no-smoothState'

然后.no-smoothState类添加到您想忽略任何页面元素。

来源

2016-03-16 06:55:26 RobM

对我来说，黑名单在这种情况下不起作用。我已经做了什么来保持菜单不变并只替换想要的内容，下面将介绍解决方案。

HTML（的index.html，about.html和work.html跟随模式）：

<body> 
    <div id="main"> 
     <div class="menu"> 
      <a href="index.html">index</a> 
      <a href="work.html">work</a> 
      <a href="about.html">about</a> 
     </div> 
     <div id="content"> 
      <h1>INDEX</h1> 
     </div> 
    </div> 
</body>

JS：

$(function() { 
    $('#main').smoothState({ 
    'onReady': { 
     'render': function($container, $newContent) { 

      // replace only content div and leave the menu alone 
      $container.find('#content').html($newContent.filter('#content')); 
     } 
    } 
    }); 
});

请请注意，我还没有测试过其他方面是否仍然有效，但似乎像一切都很好。我对插件本身并不熟悉，并考虑将其用于我的下一个项目。这个解决方案是作为一些测试和实验的结果出来的。

来源

2016-03-22 17:37:50 Jacek

SmoothStateJS：如何防止页面更新时元素刷新？

回答

相关问题