Question

标题中的

：当我开始在代码中实现Barba.js时（在主页上使用three.js），速度变得非常慢。我认为这是因为每次我提取一个新的html时，我都会运行代码以再次调用three.js函数。有谁知道我该如何解决？该网站位于此处：jacobtruax.info （目前只有信息按钮可用）

这里是barba.js代码：

    document.addEventListener("DOMContentLoaded", function () {
  var lastElementClicked;
  doThree()

Barba.Pjax.start();
  Barba.Dispatcher.on('newPageReady', function() {

    doThree()
 });




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

我的所有3.js函数都在内部：

const doThree = function () {}

Index.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="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="homepage">
  <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>
<script src="three.min.js"></script>
<script src="portfolio.js"></script>
</div>
</div>
</body>

Info.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 Info</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
</head>

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

<section class="info-page">
  <div class="about">
  <h1>
      Graphic designer, font-end web developer, and art director  - working mostly in digital development and editorial design.
      <br><br>
      Co-founder of fn-up Magazine.
      <br><br>
      Art director and member of Good Weather.
  </h1>
</div>

<div class="education">
  <h2>
      Education:
  </h2>
  <p>
      Bachelors of Communication Design from Paris College of Art
  </p>
  <h2>
      Features:
  </h2>
  <p>
      <a href="http://brutalistwebsites.com/">Brutalist Websites x 2</a><br>
      <a href="http://klikkentheke.com/websites/jacob-truax/">Klikkentheke</a><br>

  </p>
</div>

<div class="address">
  <h2>
      Contact:
  </h2>
  <p>
      <a href="mailto:jtruax303@gmail.com">jtruax303@gmail.com</a><br><br>
      + 1 (720) 883-4040<br><br>
      26 rue Piat<br>
      Paris France<br>
      75020
  </p>
  <h2>
      Currently:
  </h2>
  <p>
      Available for freelance
  </p>
</div>
</section>
</div>
</div>
</body>

使用PJAX和Three.js的网站速度有问题吗？

0 个答案: