0

だから私はギャラリーで N 個の画像を取り、アコーディオンのような div にそれらを広げるために書いたスクリプトを持っています。スクリプトはデスクトップやほとんどのモバイル デバイスでうまく機能しますが、何らかの理由で iPad は私に非常に腹を立てています。約 70% の確率で、アニメーションがハングして完全に停止します。

これらはiPadからの2つのスクリーングラブです。毎回同じ場所にぶら下がるわけではありません 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 は jQuery よりも高速です。 Safari はそれを管理するのに非常に強力で、スムーズに動作するはずです。

CSS3 をサポートしていない他のブラウザーと互換性を持たせたい場合は、jquery-animate-enhancedなどを使用してみてください。

また、パフォーマンスを向上させるために、 CSS 3d 変換を使用してみてください。（ハードウェアアクセラレーションを利用します）代わりに：

transform: translateZ(0);

使用する：

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.

ポール アイリッシュは、ここでそれについて、またそれをサポートしていないブラウザーにフォールバックする方法について素晴らしい記事を書いています。

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

于 2013-06-04T16:07:08.417 に答える