JavaScript 页面转换后文件未加载 (barba.js)

Question

我的 index.html 一切正常。在第一个 .onload 页面上，所有图像都是可拖动的，并且遍布整个页面

问题来了：

但是，当 我进入页面 ABOUT.html 并返回到 INDEX.html 时，我的脚本看起来不再工作了，我可以只能看到一张甚至无法拖动的图片。

在此处仔细查看我的项目： https://codepen.io/cat999/project/editor/AEeEdg

** 我该如何解决问题？有人可以帮我修复我的代码吗？ **

var winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    threeWinHeight = winHeight*3;

$(window).on('resize', function(){
  winHeight = window.innerHeight,
  twiceWinHeight = winHeight*2;
});


$('.shape').each(function(){
  var topPos = Math.floor(Math.random()*1300),

      //BE CAREFUL 7000px is less then total body height or  CAUSING OVERFLOW
      leftPos = Math.floor(Math.random() * winWidth);
  $(this).css('top', topPos + 'px');
  $(this).css('left', leftPos + 'px');
});




Draggable.create('.shape', {
  //type:"rotation",
  bounds: '.section-2',
  edgeResistance:0.65,
  throwProps:true,
});



var number = Math.floor((Math.random() *15) + 2);
var number2 = Math.floor((Math.random() * 0) + -15);
var number3 = Math.floor((Math.random() * 0) + 15);
var number4 = Math.floor((Math.random() * 0) + 6);
$(".shape--circle").css("transform", "rotate(" + number2 + "deg)");
$(".shape--square").css("transform", "rotate(" + number3 + "deg)");
$(".shape--circle-2").css("transform", "rotate(" + number4 + "deg)");

此外，索引和关于部分已使用 barba.js。这是我的脚本列表：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="main.js"></script>

Answer 1

Marlene，尝试在 main.js 文件中的 barba.init 函数中添加以下 JS 代码：

    views: [{
        namespace: 'home-section',
        beforeEnter({ next }) {

        // load your script
        let script = document.createElement('script');
        script.src = 'draggable.js'; // location of your draggable js file that is responsible for that image loading and dragging functionality
        next.container.appendChild(script);
        }, 
    }],

Answer 2

Marlene，您需要将下面的 JS 代码放在一个单独的 JS 文件中，并将其命名为 draggable.js，然后仅将指向该 JS 文件的路径插入到 script.src 参数中，即在上面的 barba.init 函数中的代码示例中说明。


var winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    threeWinHeight = winHeight*3;

$(window).on('resize', function(){
  winHeight = window.innerHeight,
  twiceWinHeight = winHeight*2;
});


$('.shape').each(function(){
  var topPos = Math.floor(Math.random()*1300),

      //BE CAREFUL 7000px is less then total body height or  CAUSING OVERFLOW
      leftPos = Math.floor(Math.random() * winWidth);
  $(this).css('top', topPos + 'px');
  $(this).css('left', leftPos + 'px');
});

Draggable.create('.shape', {
  //type:"rotation",
  bounds: '.section-2',
  edgeResistance:0.65,
  throwProps:true,
});


var number = Math.floor((Math.random() *15) + 2);
var number2 = Math.floor((Math.random() * 0) + -15);
var number3 = Math.floor((Math.random() * 0) + 15);
var number4 = Math.floor((Math.random() * 0) + 6);
$(".shape--circle").css("transform", "rotate(" + number2 + "deg)");
$(".shape--square").css("transform", "rotate(" + number3 + "deg)");
$(".shape--circle-2").css("transform", "rotate(" + number4 + "deg)");

JavaScript 页面转换后文件未加载 (barba.js)

JavaScript file doesn't load after page transition (barba.js)

html

javascript

css

navigation

jquery