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：如何防止頁面更新時元素刷新？

回答

相關問題