Question

我的主页正在运行three.js，并且我正在使用barba.js使用ajax进行页面之间的平滑过渡。问题是，当我在首页上来回走了几下之后，我的网站开始运行得非常慢。我试图想办法解决这个问题，我想我有一个使用barba.js Views和requestAnimationFrame的方法，但是我认为它没有足够的帮助。有谁对如何销毁或停止执行three.js函数有更好的主意？

barbaMain.js

document.addEventListener("DOMContentLoaded", function () {
  var lastElementClicked;
  let animationLoop = null

  const SingleNews = Barba.BaseView.extend({
    namespace: 'single-news',
    onEnterCompleted: function () {
        animationLoop = requestAnimationFrame( doThree )
    },

    onLeave: function() {
      cancelAnimationFrame(animationLoop)
    },

  });

  SingleNews.init()

Barba.Pjax.start();






  Barba.Dispatcher.on('linkClicked', function(el) {
    lastElementClicked = el;
  });
  var FadeTransition = Barba.BaseTransition.extend({
    start: function() {

      Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
    },

    fadeOut: function() {

      return $(this.oldContainer).animate({
          opacity: 0
        }, 400, function() {} ).promise()
    },

    fadeIn: function() {

      var _this = this;
      var $el = $(this.newContainer);

      $(this.oldContainer).hide();

      $el.css({
        visibility: 'visible',
        opacity: 0
      });

      $el.animate({
        opacity: 1
      }, 400, function() {

        _this.done();

      });
    }
  });


  Barba.Pjax.getTransition = function() {

      return FadeTransition;
  };
})

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Jacob Truax Portfolio</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="canvas-fix">
  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
  <script src="three.min.js"></script>
  <script src="portfolio.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="barba.js"></script>
  <script src="barbaMain.js"></script>

</head>

<body>

<div id="barba-wrapper">
  <div class="barba-container" data-namespace="single-news">
  <header>
  <a class="home" href="#">Jacob Truax</a>
  <a class="contact" href="info.html">Info</a>
  <a class="info" href="#">Work</a>
  </header>

<section class="three"></section>
</div>
</div>
</body>

Three.js函数都在其中：

const doThree = function () {}

使用requestAnimationFrame启动和停止在Barba.js中运行three.js的函数？

0 个答案: