SmoothStateJS: как предотвратить обновление элемента при смене страницы?

Я использую SmoothState.Js для загрузки новых страниц по кликам. Поскольку на каждой из этих страниц логотип остается в одном и том же месте / размере, я бы хотел, чтобы логотип не обновлялся и не исчезал / не менялся при изменении страницы.

Ссылки в моем меню не обновляются, а логотип обновляется. Я не видел ничего в документах или в Google, обращающихся к этому.. Как бы я продолжал сохранять изображение в месте между этими изменениями страницы 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:

 <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>

Доступные вызовы событий для SmoothState:

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
Источник

2 ответа

Вам необходимо использовать опцию "черный список", как указано в документации:

Селектор jQuery, указывающий, какие элементы в элементе smoothState следует игнорировать. Это включает в себя как элементы формы и якоря.

Просто добавьте это к объекту параметров blacklist: '.no-smoothState'

Затем добавьте .no-smoothState Класс для любых элементов страницы, которые вы хотите игнорировать.

Источник

Для меня черный список не работал в такой ситуации. То, что я сделал, чтобы меню не менялось и заменял только желаемый контент, представлено ниже.

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

Пожалуйста, обратите внимание, я не проверял, все ли еще работает, но кажется, что все хорошо. Я новичок в самом плагине и рассматриваю его для моего следующего проекта. Это решение появилось в результате некоторых испытаний и экспериментов.

Источник
Другие вопросы по тегам