Javascript ProgressBar.js仅在页面刷新后工作

我试图在我的Rails应用程序中使用，但我承认我对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>

window.onload=函数onload（）{
var circle=新的进度条。循环（“#circleprogress”{
颜色：“#38A6A6”，
时长：3000，
放松：“放松”，
冲程宽度：7，
trailColor:“#D5D5D5”，
步幅：1，
正文：{
值：+'%'
},
});
循环。设置动画（）；
};

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

我已经研究过了似乎有相同问题的，但解决方案是安装

jquery turbolinks

gem，我已经这样做了，并且在我的application.js中需要它，它仍然只有在重新加载后才能工作

如何修复此问题？

通常情况下，TurboLink（或js函数的配置）是罪魁祸首。查看代码时，

window.onload=function onload（）

可能要求您在使用TurboLink时重新加载页面

相反，请尝试以下方法：

window.ready = function onLoad()

原因如下：TurboLink通过加载一次布局来工作，然后在浏览不同页面时，它会异步更新特定元素。因此，

.onload

不起作用，因为您的新页面从未真正“加载”过传统意义上的内容，它只是通过javascript更新旧内容。这当然会使您的站点非常快速，但您只需要习惯于以稍微不同的方式调用javascript函数（见上文）

如果上述方法不起作用，请查看如果您暂时取消TurboLink（执行此操作时请记住

捆绑安装

），会发生什么情况，但我敢打赌，您会花美元购买甜甜圈，这就是问题所在

关于jquery turbolinks:我建议不要使用这个gem，原因有两个（如果我搞错了，请直接告诉我）。首先，避免应用程序中出现过多的gem是很好的，通过对javascript进行上述更改，您很可能真的可以覆盖这个gem的大部分优势。其次，它已经一年半没有更新了，所以。。。嗯

---

谈判TurboLink的最后一个技巧有时候，您会希望某个特定的链接只执行经典的非异步加载，而不使用TurboLink（例如，如果您在布局之间跳跃）。在这种情况下，您可以像这样包含

no\u turbolink

属性：

我从这里找到了解决方案：

我所做的是：

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

var就绪；
ready=函数（）{
var circle=新的进度条。循环（“#circleprogress”{
颜色：“#38A6A6”，
时长：3000，
放松：“放松”，
冲程宽度：7，
trailColor:“#D5D5D5”，
步幅：1，
正文：{
值：+'%'
},
});
循环。设置动画（）；
};
$（文件）。就绪（就绪）；

---

根据另一个问题，它适用于TurboLink。

如果将window.onload更改为window.ready怎么办？我尝试了

window.ready

而不是

window.onload

，但它不起作用。因此，我摆脱了TurboLink，它工作得很好（并且在第一次尝试时加载）。问题是，我可能希望在我的应用程序中保留TurboLink，那么我应该怎么做？