Question

我有一个rails应用程序，我试图在其中实现一些jQuery。

我有两个脚本，一个适用于第一次加载，另一个需要重新加载。我现在有一个问题，我现在修改了application.js中的turbolinks。现在同样的问题发生在另一个脚本上。

有效的那个：

jQuery(document).ready(function($){
//set animation timing
var animationDelay = 5000,
    //loading bar effect
    barAnimationDelay = 3800,
    barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
    //letters effect
    lettersDelay = 50,
    //type effect
    typeLettersDelay = 150,
    selectionDuration = 500,
    typeAnimationDelay = selectionDuration + 800,
    //clip effect 
    revealDuration = 600,
    revealAnimationDelay = 1500;

initHeadline();

那个不起作用的人：

jQuery(document).ready(function($){
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
var MQL = 1170;

//primary navigation slide-in effect
if($(window).width() > MQL) {
    var headerHeight = $('.box-header').height();
    $(window).on('scroll',
    {
        previousTop: 0
    }, 
    ...
    ...

等等。

为什么会这样？ CSS或被调用的页面是否存在问题？

Answer 1

Turbolinks可能会导致Rails应用程序出现问题，因为它会尝试通过维护页面<head>元素中列出的资源（以及其他内容）来节省开销。使用完全加载（通过刷新按钮）加载页面时，会发生实际的就绪事件并且您的脚本可以正常工作。另一方面，如果您以某种其他方式访问页面（通过链接），Turbolinks会尝试重用<head>元素，因此没有触发就绪事件。

过去的解决方案是通过删除application.js中的require行或者通过link（data：{no_turbolink：true}）来完全禁用Turbolinks。使用Rails 4.2.x和5.x，您可以监听Turbolinks相关事件，该事件应该在以前正常就绪事件发生的地方起作用。

来自documentation：

但是，由于Turbolinks会覆盖正常的页面加载过程，这种依赖的事件不会被解雇。如果你有代码看起来像这样

$(document).ready ->
  alert "page has loaded!"

您必须更改代码才能执行此操作：

$(document).on "turbolinks:load", ->
  alert "page has loaded!"

（为清晰起见，引用稍微重新排列）

jQuery在第一次加载

1 个答案: