Question

我创建了一个小型交互式模块，用户可以在其中随机播放图像。此模块工作正常（即使它尚未优化）除了iOS 。如果用户仅单击一个图像，则会正确显示随机播放动画，但是在按随机播放按钮时则不是这种情况。

随机播放按钮代码：

$("#shuffle").click(function(){
    $(".slide").each(function(){
        var target = $(this);
        shuffleThis(target);
    })
})

随机播放功能：

function shuffleThis(target, thisType){
for ( var i = 0; i < 5; i++ ) {
    if(i === 4){
        setTimeout(function() {
            var rand = randomizeIMG(thisType);
            var finalRand = rand.split(/_(.+)?/)[0];
            target.append( '<img src="assets/img/rds/'+ rand +'" />' );
            target.children("img:first").fadeOut("slow").remove();
        }, 75*i);   
    } else {
        setTimeout(function() {
            var rand = randomizeIMG(thisType);
            target.append( '<img src="assets/img/rds/'+ rand +'" />' );
            target.children("img:first").remove();
        }, 75*i);
    }   
}}

似乎iOS无法重新绘制DOM。也许是一个setTimout问题。

如何改善iOS下的结果？

Answer 1

对我来说，这看起来像iOS下的setTimeouts已知问题。也许this会有帮助吗？

编辑：尝试的另一件事可能是https://stackoverflow.com/a/10991974/1360368

Answer 2

如果没有看到设备本身的实际最终图像，很难确切地说出你的问题是什么，但是有一些事情你需要考虑：

我怀疑DOM操作（即添加元素）比在iPhone / iPad上显示，隐藏或移动元素更昂贵（这是我基于iOS + Safari网络项目的经验，但我不知道没有足够的事实支持它，所以我“怀疑”它。）
也就是说，与加载实际图像所需的时间相比，更改DOM所需的时间可能相形见绌。我非常怀疑你的iWhatever设备中的一些图像没有加载到75ms你正在加载7张图像。手机上的延迟可能会高于桌面上的延迟。
如果浏览器重绘它，setTimeout（）调用可能会比您预期的要晚。 iOS UI代码中的许多元素旨在提供响应式界面，如果这意味着延迟/取消/跳过慢速页面动画，它肯定会在任何程度上都这样做。

考虑到这些，我建议如下：

提前加载所有图像（例如，可以使它们可见：隐藏），只需在循环中显示/隐藏它们。
如果您的setTimeout（）调用仍然给您带来麻烦，那么请加载所有随机图像并制作一个随机化的CSS3关键帧动画，将图像放入“随机”位置，然后播放动画。如果同一个动画看起来太相似，如果多次播放，你可以做一些变化。使用CSS3步骤（）使图像只是“捕捉”到他们的位置，而不是移动。

希望这有帮助。

用jQuery拖曳图像 - 性能问题

2 个答案: