javascript - smoothState.js与其他插件冲突

我已经设法在我的网站上实现了smoothState.js插件，并且效果很好，但是我的另一个非常简单的jQuery插件无法正常工作，从以下代码开始：

$(document).ready()

我需要刷新页面才能使其再次工作。

我已经读了smoothState documentation，它说我应该将您的插件初始化包装在一个我们同时调用$ .fn.ready（）和onAfter的函数中，但是我对编程来说是陌生的，所以我问您的帮助。

如何使jQuery插件与smoothState一起使用？

最佳答案

您需要将以$(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时不会重新加载页面，因此我们需要一种在页面最初加载时和平滑状态加载时都调用代码段的方法内容。为此，我们将上面的代码片段转换为如下功能：

(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())与函数包装器进行了交换，其他所有内容均保持不变。

因此，现在我们有了一个需要做的功能，就是在页面加载并处于“平滑状态”时调用它。

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

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

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