ProgressBar.js 仅在页面刷新后有效答案

【问题标题】：ProgressBar.js only works after page refreshProgressBar.js 仅在页面刷新后有效
【发布时间】：2016-01-29 16:53:30
【问题描述】：

我试图在我的 Rails 应用程序中使用ProgressBar.js，但我承认我不太了解 Javascript。我的一个观点中有这段代码：

<div class="circleprogress" id="circleprogress"></div>

<script type="text/javascript">
window.onload = function onLoad() {
    var circle = new ProgressBar.Circle('#circleprogress', {
        color: '#38A6A6',
        duration: 3000,
        easing: 'easeInOut',
        strokeWidth: 7,
        trailColor: '#D5D5D5',
        trailWidth: 1,
        text: {
            value: <%= (@percentage_of_goal * 100).round %> + '%'
        },
    });

    circle.animate(<%= @percentage_of_goal%>);
};
</script>

@percentage_of_goal 已经在我的控制器中定义了。代码工作正常，但只有在我刷新页面之后。

我看过other questions 似乎有同样的问题，但解决方案是安装jquery-turbolinks gem，我已经这样做了，并且在我的 application.js 中需要它，它仍然仅在重新加载后有效。

我该如何解决这个问题？

【问题讨论】：

如果将 window.onload 更改为 window.ready 会怎样？

标签： javascript jquery ruby-on-rails

【解决方案1】：

turbolinks（或者你的 js 函数的配置）通常是罪魁祸首。在查看您的代码时，window.onload = function onLoad() 如果您使用的是 turbolinks，可能会要求您重新加载页面。

试试这个：

window.ready = function onLoad()

原因如下： Turbolinks 的工作原理是加载一次布局，然后当您浏览不同的页面时，它会异步更新特定元素。因此，.onload 不起作用，因为您的新页面从未真正“加载”过传统意义上的“加载”，它只是通过 javascript 更新旧内容。这当然会让您的网站变得非常快，但您只需要习惯以不同的方式调用您的 javascript 函数（见上文）。

如果上述方法不起作用，看看如果您暂时摆脱 turbolinks 会发生什么（这样做时请记住bundle install），但我会赌你美元去吃甜甜圈，这就是问题所在.

关于 jquery-turbolinks： 我建议不要使用这个 gem，原因有两个（如果我弄错了，请直截了当）。首先，避免在您的应用程序中使用过多的 gem 是很好的，而且您很可能通过对您的 javascript 进行上述更改来覆盖这个 gem 的大部分优点。其次，一年半没更新了，所以……是的。

关于协商 turbolinks 的最后一个提示 有时您会希望特定链接在不使用 turbolinks 的情况下仅执行经典的非异步加载（例如，如果您在布局之间跳转）。在这种情况下，您可以像这样包含no_turbolink 属性：<%= link_to "Home", home_path, data: {no_turbolink: true} %>

【讨论】：

我试过window.ready而不是window.onload，但它不起作用。所以后来我摆脱了 turbolinks，它运行良好（并在第一次尝试时加载）。问题是我可能想在我的应用程序中保留 turbolink，那我该怎么办？

【解决方案2】：

我从这里找到了解决方案： Rails 4: how to use $(document).ready() with turbo-links

我做的是这样的：

var ready;
ready = function() {
    var circle = new ProgressBar.Circle('#circleprogress', {
        color: '#38A6A6',
        duration: 3000,
        easing: 'easeInOut',
        strokeWidth: 7,
        trailColor: '#D5D5D5',
        trailWidth: 1,
        text: {
            value: <%= (@percentage_of_goal * 100).round %> + '%'
        },
    });

    circle.animate(<%= @percentage_of_goal%>);
};

$(document).ready(ready);

根据另一个问题，哪个适用于 turbolinks。

【讨论】：