Javascript Arctext在重新加载页面时的工作方式不同

我正在使用曲线在我的网页上的一些文本

但是我有一个问题

当我第一次链接到页面时，曲线只是看起来有点像下面

但是，当我重新加载页面时，曲线会正确出现，如图所示

这就是HTML：

<div class='row'>
 <div class='columns '>
<hr class='songtitlehr'>
<p class='sotd'>SONG OF THE DAY</p>
    <p class='songtitle'>SOTD</p>
<p class='songartist '>BY CARL SALDANHA</p>

<p class='sotd2'>SONG OF THE DAY</p>

<hr class='songtitlehr'>
 </div> 
</div>

---

你有JSFIDLE或者到live页面的链接吗？我似乎无法在JSFIDLE上复制它。我怀疑这与我的浏览器（chrome）计算圆弧高度的时间有关。当JS fiddle每次重新加载时，就像再次请求GET一样。我会在一个小时内打开一个实时页面并与大家分享

 $(document).ready(function(){
     $('.sotd').arctext({radius:240});
     $('.sotd2').arctext({radius:240, dir:-1});
    });