[英]Scripts not loading after loading and navigating new page using (Barba.js)
HERE THE PROBLEM:这里的问题:
https://i.stack.imgur.com/AMOlF.gif https://i.stack.imgur.com/AMOLF.gif
Everything is working fine on my index.html.在我的 index.html 上一切正常。 On the first.onload page all the images are draggable and all over the page.
在 first.onload 页面上,所有图像都是可拖动的并且遍布整个页面。 However, when I WENT TO THE PAGE ABOUT.html AND GO BACK TO THE INDEX.html my script look like isn't working anymore and I can see only one image that is not even draggable anymore.
但是,当我进入 ABOUT.html 和 GO 页面时回到 INDEX.html我的脚本看起来不再像可以拖动的图像了
my project here: https://codepen.io/cat999/project/editor/AEeEdg我的项目在这里: https://codepen.io/cat999/project/editor/AEeEdg
HOW DO I FIX ISSUE?如何解决问题? COULD SOMEBODY HELP ME TO FIX MY CODE?
有人可以帮我修复我的代码吗?
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)");
I try adding the following JS code in my main.js file inside barba.init function but did not work:我尝试在 barba.init function 内的 main.js 文件中添加以下 JS 代码,但没有成功:
views: [{
namespace: 'home-section',
beforeEnter({ next }) {
// load script
let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js';
script.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js'; // location of your draggable js file that is responsible for that image loading and dragging functionality
next.container.appendChild(script);
},
}],
`````
[1]: https://i.stack.imgur.com/AMOlF.gif
You can specify what barba can do before entering after the transition that leads you to the new page.您可以在引导您进入新页面的转换之后指定 barba 在进入之前可以执行的操作。
For example, if you want to execute a script or just a piece of code to the next transition you can use this.例如,如果您想执行一个脚本或只是一段代码到下一个转换,您可以使用它。
barba.init({ views: [{ namespace: 'index', beforeLeave(data) { // do something before leaving the current `index` namespace } }, { namespace: 'contact', beforeEnter(data) { // do something before entering the `contact` namespace } }] });
you can find the 'namespace' tag on every single HTML doc that you create and use barba.您可以在您创建和使用 barba 的每个 HTML 文档上找到“命名空间”标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.