Javascript jQuery函数仅在刷新页面后运行

我正在使用jQuery和CSS

-webkit transform:rotate（）

为一组列表项编写一个非常简单的可视化代码

这是我正在做的一个示例：

所以，非常简单。它甚至可以完美地工作！昨晚我一直工作到深夜，试着做点什么，然后重新振作起来看看结果。没问题。然而，今天，当我重新开始工作（即从头开始打开本地主机站点）时，我意识到轮换没有发生。所以我刷新了，神奇地，旋转出现了

问题：事实证明，代码只有在刷新页面时才能成功运行。第一次打开页面时，不会发生任何事情。

我尝试过改变代码，改变它的顺序，加上这个，减去那个，等等。jQuery在我看来总是一件非常反复无常的事情

这是我的基本代码

$(window).load(function() {
    $('li').each(function() {
        var min = -3;
        var max = 3;
        var random = Math.floor(Math.random() * (max - min + 1)) + min;
        $(this).css('-webkit-transform','rotate('+random+'deg)')
    });
});

我只能说另外两件事：

1） 我在关闭

标记之前运行它。（不过，根据我的经验，Javascript和jQuery中的顺序问题会导致一致性错误；这是我第一次在刷新后才运行代码。）

2） 在开始时，我有一个

$（document）.ready（）

，其中包含实际构建列表的脚本。我使用jQueryJPlayer来构建播放列表

---

更新：我已经创建了一个JSFIDLE项目。问题是，一个人不能像这样刷新，所以它总是像小提琴中的第一个负荷。不过，它的工作原理是为了测试如何在第一次加载期间使事情保持静止。

使用jQuery时，它应该是：

$(document).ready(function() {
    $('li').each(function() {
        var min = -3;
        var max = 3;
        var random = Math.floor(Math.random() * (max - min + 1)) + min;
        $(this).css('-webkit-transform','rotate('+random+'deg)')
    });
});

---

执行CSS调整后，列表生成器将运行。当您刷新页面时，它会被缓存，因此会在CSS调整之前加载，以便应用它们

---

您需要在列表构建完成时调用CSS调整，作为回调，或者以其他方式使它们同步，可能会重新排序代码，尝试使用$（document）.ready（）和$（window）.load（）。

最后，当我使用jPlayer和他们的现成脚本来构建我想要调整CSS的媒体列表时，我决定谁知道列表是如何构建的。（好吧，任何重建代码的人！）除非我使用了

timeout

（正如一个人的评论所建议的）并猜测延迟一个脚本以确保另一个脚本100%完成并且播放列表准备就绪的安全时间，否则，在我看来，无法确保这在所有计算机和所有浏览器中都能正常工作。而且，即使如此，根据我的经验，

timeout

对于几乎任何事情都不是最好的解决方案！所以我决定在jPlayer原始代码中搜索，以找到创建播放列表的最后一个实例；在那里，我把我的CSS调整代码，现在它的工作完美

此解决方案仅适用于使用jPlayer的用户。但是，另一方面，问题可能只会在使用jPlayer时出现（以及当想要做与我想做的完全相同的调整时！）

因此，在jplayer.playlist.min.js文件中，必须找到以下内容

c.playlist.length?b(this).slideDown(c.options.playlistOptions.displayTime) ...

在

（this）

和

.slideDown（…）

之间，应该插入希望使用的代码。比如说，我就这样做了

c.playlist.length?b(this).find('li').each(function() {
    var min = -3;
    var max = 3;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    $(this).css('-webkit-transform','rotate('+random+'deg)');
})
.parent().slideDown(c.options.playlistOptions.displayTime) ...

就这样

---

另外，感谢你们所有人的参与、回答和评论

那会是什么浏览器呢？我正在Chrome上测试。您所做的更改是在DOM

ready

上执行代码，而不是在窗口的

load

事件上执行代码，对吗？这应该没有什么区别。谢谢你的快速回复！问题是，当我在

$（document.ready（）

下执行此代码时，什么都没有发生。即使在提神的时候也不行。在

$（document）.ready（）

下，我有一个创建列表的脚本：jPlayer调用的项。@lonesomeday，你是对的。。但这在jQuery中不是一个好的做法吗？@VickyGonsalves-取决于你是否正在做一些只需要DOM就可以准备好的事情，或者如果你真的需要加载整个窗口。不管怎样，在这种情况下，这并不重要，都应该在第一次加载和刷新时启动。嗨，Shomz。谢谢你的回复。我有一个问题：如果构建器是在文档准备好之后运行的，而调整是在加载所有内容之后运行的，那么它们不应该在构建列表之后发生吗？我认为，

ready

在

onload

之前就已经运行了很多次了。我能够通过在CSS调整周围添加一个setTimeout（）调用使JSFIDLE工作。看起来，即使列表构建代码在此之前已经运行，列表也没有同步构建。是的，超时可以工作，但这不是最好的方法@问题27使用最基本的设置，我发现ready和load之间有3毫秒的差异，比如：（当然，加载在JSFIDLE上不起作用，但您需要创建自己的html文件并运行它），或者用您正在构建的页面更好地测试它。谢谢大家的回答@Shomz根据你的测试，没有办法设置两个脚本在所有计算机和浏览器中一个接一个地播放，就像我那样。为了找到一个地方，在所有列表项准备好后，我必须在jPlayer代码中进行搜索，以便返回对CSS tweaks函数的调用@迈克·爱德华兹：是的，

超时

，也许还有

延迟

，但正如肖姆兹所说，这并不能让我相信这是最好的方法。过去，我在超时方面遇到了很多麻烦。也许治疗会比疾病更糟。太好了，很高兴你成功了！如果jPlayer不允许回调（但我认为它允许），您可以始终在HTML中创建容器元素，然后在其中加载jPlayer实例。这样，你就不必关心什么时候会发生什么，你只需要让CSS调整做它们自己的事情，然后jPlayer就可以了。但不管怎样，你似乎都需要