Question

我正在使用一些简单的WebGL（Three.js）和javascript构建网站。 WebGL仅在主页上用于图像效果。我制作了一个新脚本来实现正常工作的Ajax页面转换，但是当我回到主页时，我的WebGL代码将不再起作用（它似乎不会重新加载）。

HTML （WebGL部分来自Codrops）

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

  // Some basic code

</head>

<body class="loading demo-4">

  <nav class="main-navigation" id="main-nav">
    <a href="home.html" class="nav-item active">
      <div class="hint-inner">INDEX</div>
    </a>
    <a href="" class="nav-item">
      <div class="hint-inner">Works</div>
    </a>
  </nav>

  <main>

    // Some Code

  </main>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
  <script src="javascripts/imagesloaded.pkgd.min.js"></script>
  <script src="javascripts/three.min.js"></script>
  <script src="myscript.js"></script>


  <script>
    let currentIndex;
    const itemsWrapper = document.getElementById("itemsWrapper");
    const thumbs = [...itemsWrapper.querySelectorAll("img.grid__item-img:not(.grid__item-img--large)")];
    const fullviewItems = [...document.querySelectorAll(".fullview__item")];
    const backToGridCtrl = document.querySelector(".fullview__close");
    const transitionEffectDuration = 1.2;

    const transitionEffect = createDemoEffect({
      activation: {
        type: "mouse"
      },
      timing: {
        duration: transitionEffectDuration
      },
      transformation: {
        type: "simplex",
        props: {
          seed: "8000",
          frequencyX: 0.2,
          frequencyY: 0.2,
          amplitudeX: 0.3,
          amplitudeY: 0.3
        }
      },
      onToFullscreenStart: ({
        index
      }) => {
        currentIndex = index;
        thumbs[currentIndex].style.opacity = 0;
        transitionEffect.uniforms.uSeed.value = index * 10;
        toggleFullview();
      },
      onToGridFinish: ({
        index,
        lastIndex
      }) => {
        thumbs[lastIndex].style.opacity = 1;
        fullviewItems[currentIndex].classList.remove("fullview__item--current");
      },
      seed: 800,
      easings: {
        toFullscreen: Power1.easeOut,
        toGrid: Power1.easeInOut
      }
    });
    transitionEffect.init();

    const toggleFullview = () => {
      if (transitionEffect.isFullscreen) {
        TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-title"), 0.2, {
          ease: Quad.easeOut,
          opacity: 0,
          x: "5%"
        });
        TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-text"), 0.2, {
          ease: Quad.easeOut,
          opacity: 0,
          x: "5%"
        });
        TweenLite.to(backToGridCtrl, 0.2, {
          ease: Quad.easeOut,
          opacity: 0,
          scale: 0
        });

        transitionEffect.toGrid();
      } else {
        fullviewItems[currentIndex].classList.add("fullview__item--current");

        TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-title"), 1, {
          ease: Expo.easeOut,
          startAt: {
            x: "5%"
          },
          opacity: 1,
          x: "0%",
          delay: transitionEffectDuration * 0.6
        });
        TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-text"), 1, {
          ease: Expo.easeOut,
          startAt: {
            x: "5%"
          },
          opacity: 1,
          x: "0%",
          delay: transitionEffectDuration * 0.6
        });
        TweenLite.to(backToGridCtrl, 1, {
          ease: Expo.easeOut,
          startAt: {
            scale: 0
          },
          opacity: 1,
          scale: 1,
          delay: transitionEffectDuration * 0.6
        });
      }
    };

    backToGridCtrl.addEventListener("click", () => {
      if (transitionEffect.isAnimating) {
        return;
      }
      toggleFullview();
    });

    // Preload all the images in the page
    imagesLoaded(document.querySelectorAll("img"), instance => {
      //https://www.techrepublic.com/article/preloading-and-the-javascript-image-object/
      document.body.classList.remove("loading");

      // Make Images sets for the transition effect
      let images = [];
      for (var i = 0, imageSet = {}; i < instance.elements.length; i++) {
        let image = {
          element: instance.elements[i],
          image: instance.images[i].isLoaded ? instance.images[i].img : null
        };
        if (i % 2 === 0) {
          imageSet = {};
          imageSet.small = image;
        }

        if (i % 2 === 1) {
          imageSet.large = image;
          images.push(imageSet);
        }
      }
      transitionEffect.createTextures(images);
    });

  </script>
</body>

</html>

Ajax （我的Ajax代码）

// Main menu transitions
$("#main-nav a").on("click", function(event) {
  event.preventDefault();

  const href = $(this).attr("href");

  window.history.pushState(null, null, href);

  $("#main-nav a").removeClass("active");
  $(this).addClass("active");

  $.ajax({
    url: href,
    success: function(data) {
      $("main").fadeOut(500, function() {
        const newPage = $(data)
          .filter("main")
          .html();

        $("main").html(newPage);

        $("main").fadeIn(500);

        $(window).trigger("load");
      });
    }
  });
});

我已经搜索了一些答案，但是没有一个对我有用。我的问题是如何在ajax调用中重新加载脚本（包括嵌入到文档中的脚本）？

我的第二个问题是，当我单击镶边选项卡上的“上一个”按钮时，URL更改了，但内容没有更改。我该如何解决这个问题？

在Ajax调用（JS / WEBGL）上重新加载所有脚本

0 个答案: