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

Question

我正在使用jQuery和CSS -webkit-transform: rotate()为一组列表项编写一个非常简单的 visual thingy 。

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

所以，非常简单。它甚至可以完美运行！昨晚一直在深夜工作，尝试一些东西然后刷新以查看结果。没问题。然而，今天，在恢复我的工作（即从头开始我的本地主机站点）后，我意识到轮换没有发生。所以我神清气爽，神奇地出现了旋转。

问题：事实证明，代码只有在刷新页面时才能成功运行。当页面第一次打开时，没有任何反应。

我已经尝试过更改代码，更改顺序，添加它，减去它等等.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）我正在关闭</body>标签之前运行它。 （尽管根据我的经验，Javascript和jQuery中的订单问题会导致一致的错误;这是我第一次只在刷新后运行代码。）

2）一开始我有一个$(document).ready()来保存实际构建列表的脚本。我正在使用jQuery jPlayer来构建播放列表。

更新：我已经创建了一个jsFiddle项目。 jsFiddle Here.事实是，人们不能这样刷新，所以它总是像小提琴中的第一次加载一样。不过，它的工作原理是为了测试在第一次加载时如何使事情发生。

Answer 1

使用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)')
    });
});

Answer 2

在进行CSS调整后，列表构建器会运行。刷新页面时，它会被缓存，因此会在CSS调整之前加载，因此它们会应用。

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

Answer 3

最后，当我使用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) ...

就是这样。

P.S。感谢所有投入，回答和评论的人！