Question

所以我有一个脚本，我写的是在画廊中拍摄N个图像并将它们传播到一个div，有点像手风琴。该脚本在桌面和大多数移动设备上运行良好，但ipad出于某种原因对我非常生气。大约70％的时间动画会挂起并完全停止。

这些是来自ipad的两个屏幕抓图。它不会每次都挂在同一个地方 ipad screenshot 1 ipad screenshot 2

当然，图像应该均匀分布，但动画已挂在这里。 ipad本身就是响应式的，我可以毫无问题地在safari中切换标签。

我最初没有缓存我的选择器并执行每个（）循环以通过每个div.galleryItem，一旦我切换到缓存选择器它一点更好......但它仍然挂起。

这是我在发布时调用的javascript：

function activateGallery() {
    var n = $('.galleryItem').size(); //number of images in gallery
    var o = Math.round(100/n); //percent to push each image to the left
    var os = 0; //current amount of space on the left
    var z = 1; //z-index
    var d = 0; //duration of animation

    $('#totalSlides').empty().html(pad(n));

    //clean up any open controls
    $('.galleryItem.active > .imageInfoCondensed > .toggle').fadeOut();

    //deactivate active slide if we have one
    $('.galleryItem.active').removeClass("active");

    //NEW ALIGN LOOP WITH CACHED SELECTORS
    var galItems = new Array();
    var galImages = new Array();
    var eq;

    //assign selectors - 1 indexed
    for (i=1;i<=n;i++) {
        eq = i - 1;
        galItems[i] = $('.galleryItem:eq(' + eq + ')');
        galImages[i] = $('.galleryImage:eq(' + eq + ')');
    }


    //loop again to spread images
    for (i=1;i<=n;i++) {
        galItems[i].animate({
            "marginLeft": os + "%"
        },d).css("zIndex", z);
        os = os + o;
        z++;
        d = d + 200;
    }

    //adjust margins to center pictures
    $(".galleryImage").animate({
        "marginLeft": "-35%"
    },500);

    $('.imageInfoCondensed').delay(d).slideDown(400);

    $('.galleryItem').removeClass("noBorder");
}

也许我没有正确地缓存选择器？我在这里不知所措，所以任何见解都会非常有用！

Answer 1

CSS3 would be faster for animations than jQuery. Safari管理它非常强大，应该工作得很好。

如果您希望它与其他不支持CSS3的浏览器兼容，您可以尝试使用jquery-animate-enhanced或something similar。

另外，尝试使用CSS 3d变换for a better performance。（它将利用硬件加速）而不是：

transform: translateZ(0);

使用：

transform: translate3d(0,0,0);

Answer 2

如前所述，您最好的方法是利用CSS3动画和硬件加速转换

-webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
     -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

对于任何需要您使用javascript的动画，我会考虑使用window.requestAnimationFrame来避免在移动设备上杀死cpu周期和电池寿命。

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

Paul Irish在这里有一篇很好的文章，以及如何回退到不支持它的浏览器。

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

jquery动画让ipad挂起

2 个答案: