使用jQuery对图像进行混洗 - 性能问题

Question

我创建了一个小型交互模块，用户可以通过图像进行混洗。该模块工作正常（即使它尚未优化）除iOS iOS以外。如果用户只点击一个图像，则洗牌动画会正常显示，但按下Shuffle按钮时情况并非如此。

The demo here

随机播放按钮代码：

$("#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 Web项目我的经验更贵我已经完成了，但是我没有确切的事实来支持它，所以我“嫌疑人”）。

• 也就是说，与加载实际图像所需的时间相比，更改DOM所需的时间可能会减少。我高度怀疑你的某些图像没有加载到你的75毫秒内的任何设备上，而是让它加载7张图像。手机上的延迟可能会高于桌面上的延迟。

• 如果浏览器重新绘制它，开始窒息，setTimeout（）调用可能会比您期望的时间晚。 iOS UI代码中的许多元素旨在提供响应式界面，如果这意味着延迟/取消/跳过慢速页面动画，它肯定会在任何程度上做到这一点。

有了这些想法，我建议如下：

• 加载所有图像的时间提前（你可以让他们visibility：hidden的，例如）和简单的显示/隐藏他们在你的循环。

• 如果你的setTimeout（）调用仍然给你带来麻烦，那么加载所有的随机图像并制作一个随机看起来的CSS3关键帧动画，将图像置于其“随机”位置，然后播放该动画。如果多次播放相同的动画，则可以进行一些变化。使用CSS3中的步骤（）使图像“捕捉”到他们的位置，而不是移动。

希望有帮助。