Javascript/JQuery程序只有在Safari中刷新后才能工作

此应用程序是一个虚拟转盘，因此当您单击

时，转盘应开始旋转。这是我目前唯一关心的程序部分，在页面加载后单击开/关旋钮，这样表格就会旋转。要明确的是，

应该旋转。但在初始加载后，它在Safari中不起作用

我的Javascript程序在FF和Chrome中运行得很好，但在Safari中，它只有在加载一次页面后刷新页面后才能正确运行。没有错误可言。我已经研究了无数其他类似问题的“解决方案”，但都不起作用，而且解决方案也不一致（与

@keyframe

动画、重新构建页面加载方式、不同版本的JQuery等有关的问题）

从我所看到的一切来看，这似乎是一个缓存问题，或者有些东西不是第一次加载的。在我的Safari开发工具控制台中，它显示正在加载的“资源”的数量。这个数字在第一次加载时总是更小，刷新时总是更大，或者至少这个数字似乎在变化，这是我所不期望的。所以有些东西没有被加载，或者至少我是这么理解的。我不知道如何测试这个

因为有太多可能的变量，这里有一些用于上下文的html和javascript，但我将提供一个代码笔和一个指向Github上实际运行的程序的链接

相关HTML：

<div id="table-base">
    <!-- On/off knob -->
    <div id="on"></div>
    <div id="off"></div>
    <div id="knob-base"></div>
    <div id="on-off-knob">
        <div id="knob-select"></div>
    </div>
    <!-- Platter that spins -->
    <div id="platter"></div>
    <div id="matt" class="rotate-matt">
        <div id="spindle"></div>
    </div>
    <!-- Tone arm with needle -->
    <img src="img/tone_arm_new.png" id="tone-arm" class="tone-arm-off">
    <div id='vinyl-placeholder'></div>
</div>

JS是一个更大的点击事件的一部分，我只关心

$（'#matt'）.css（'animation-play-state'，'running'）部分

下面是codepen上整个程序的精简版本：

该错误不会发生在Safari中的codepen上，因此不确定这意味着什么。这是Github上的完整程序，单击旋钮在第一次加载时不会产生任何动作。另外，这里是完整的存储库
我认为您的代码是在jQuery加载之前执行的。您是否用以下代码包装代码：
$（函数（）{Your code here}）？刚刚尝试了这个，但似乎不起作用，我将整个程序都打包在其中，但不确定是否正确。这能实现什么？我在Safari中启用了开发者面板并激活了忽略缓存。而且它总是不起作用。因此，似乎有些东西没有及时加载。检查你自己
//Check rotate vinyl or matt
if(recordLoaded == true){
    //Rotate vinyl
    $('#vinyl-rotate').css('animation-play-state', 'running');
}
else{
     //Rotate matt
     $('#matt').css('animation-play-state', 'running'); 
}