进度条.js仅在页面刷新后有效

ProgressBar.js only works after page refresh

本文关键字：刷新 有效 js      更新时间：2023-09-26

我正在尝试在我的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 已经在我的控制器中定义。代码工作正常，但仅在我刷新页面后。

我已经查看了似乎有相同问题的其他问题，但解决方案是安装 jquery-turbolinks gem，我已经这样做并在我的应用程序中需要它.js，它仍然只能在重新加载后工作。

我该如何解决这个问题？

很多时候涡轮链接(或你的js函数的配置(是罪魁祸首。 在查看代码时，如果您使用的是涡轮链接，window.onload = function onLoad()可能需要您重新加载页面。

相反，请尝试以下操作：

window.ready = function onLoad()

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

如果上述方法不起作用，看看如果您暂时摆脱涡轮链接会发生什么(请记住在这样做时bundle install(，但我敢打赌，这就是问题所在。

关于jquery-turbolinks：我建议不要使用这个gem，原因有两个(如果我弄错了，请纠正我(。 首先，最好避免在应用程序中使用过多的 gem，并且您确实可以通过对 javascript 进行上述更改来覆盖此 gem 的大部分优势。 其次，它已经一年半没有更新了，所以...是的。

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

我从这里找到了解决方案：Rails 4：如何将 $(document(.ready(( 与涡轮链接一起使用

我所做的是这样的：

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);

根据另一个问题，它适用于涡轮链接。

相关文章：