smoothState.js 与其他插件冲突

Question

我已经设法在我的网站上实现了smoothState.js 插件，它运行良好，但我的另一个非常简单的 jQuery 插件将无法运行，从以下开始：

$(document).ready()

我需要刷新页面才能让它再次工作。

我已经阅读了 smoothState documentation，它说我应该将你的插件初始化包装在一个我们在 $.fn.ready() 和 onAfter 上调用的函数中——但我是对编程很陌生，所以我请求你的帮助。

如何让我的 jQuery 插件与 SmoothState 一起工作？

Answer 1

您需要将使用$(document).ready() 启动的脚本包装在一个函数中，然后在需要时调用该函数。

例如，假设这是您当前的脚本：

$(document).ready(function() {
  $('.btn--homepage').click(function(e) {
    e.preventDefault();
    var goTo = $(this).attr('href');

    $('#page').addClass('is-exiting');
    $(this).addClass('exit-btn');

    setTimeout(function() {
      window.location = goTo;
    }, 260);
  });
});

当页面加载时它会正常工作，因为它包含在 $(document).ready(function()) 中，但由于使用 Smoothstate 时页面不会重新加载，我们需要一种方法来调用 sn-p加载以及当 smoothstate 加载内容时。为此，我们将上面的 sn-p 转换成这样的函数：

(function($) {
  $.fn.onPageLoad = function() {
    $('.btn--homepage').click(function(e) {
      e.preventDefault();
      var goTo = $(this).attr('href');

      $('#page').addClass('is-exiting');
      $(this).addClass('exit-btn');

      setTimeout(function() {
        window.location = goTo;
      }, 260);
    });
  };
}(jQuery));

如您所见，我们已将 $(document).ready(function()) 替换为函数包装器，其他一切都保持不变。

所以现在我们有了一个函数，我们需要做的就是在页面加载并处于 Smoothstate 时调用它。

要在页面加载时调用它，我们需要做的就是：

$(document).ready(function() {
  $('body').onPageLoad();
});

要在 Smoothstate 中触发它，我们需要像这样在 InAfter 回调中调用它：

onAfter: function($container) {
  $container.onPageLoad();
}

这里有一个 Smoothstate 脚本示例，显示了 onAfter 回调的放置位置：

$(function() {
  var $page = $('#main');
  var options = {
    prefetch : true,
    pageCacheSize: 4,
    forms: 'form',
    scroll: false,
    onStart: {
      duration: 1200,
      render: function($container) {
        $container.addClass('is-exiting');
        smoothState.restartCSSAnimations();
      }
    },
    onReady: {
      duration: 0,
      render: function($container, $newContent) {
        $container.removeClass('is-exiting');
        $container.html($newContent);
        $('html, body').scrollTop(0);
      }
    },
    onAfter: function($container) {
      $container.onPageLoad();
    }
  };
  var smoothState = $('#main').smoothState(options).data('smoothState');
});

很乐意在需要时提供进一步的帮助。