0

所以我有一个脚本，我编写了一个脚本，用于在画廊中拍摄 N 张图像并将它们分散到一个 div 中，有点像手风琴。该脚本在台式机和大多数移动设备上运行良好，但 ipad 出于某种原因对我很生气。大约 70% 的时间动画会挂起并完全停止。

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

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

我最初没有缓存我的选择器并执行 each() 循环来遍历每个 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");
}

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

4

2 回答 2

2

CSS3 would be faster for animations than jQuery. Safari is very powerful managing it and should work smother.

If you want it to be compatible with other browsers which does not support CSS3, you could try to make use of jquery-animate-enhanced or something similar.

Also, try to use CSS 3d transform for a better performance. (it will make use of hardware acceleration) Instead of:

transform: translateZ(0);

Use:

transform: translate3d(0,0,0);
于 2013-06-04T15:34:02.980 回答
0

如前所述，您最好的方法是利用 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/

于 2013-06-04T16:07:08.417 回答