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

Question

我正在使用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>

那是JS

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