Проблемы со скоростью работы сайта с использованием PJAX и Three.js? - PullRequest
Новая
       16

Проблемы со скоростью работы сайта с использованием PJAX и Three.js?

0 голосов
/ 24 октября 2018

, как сказано в заголовке: когда я начал внедрять 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;
  };
})

Все мои функции three.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>
...