0

サイト内の画像の移動をどのように高速化できるのでしょうか。このサイトはiPadで可能な限り高速である必要があり、現在、画像の動きはあまり流動的ではありません。（iPad3およびiPhone 5でテスト済み）

サイトはとてもシンプルです。主に構造は次のとおりです。

<div id="slide1" class="slides">
</div>

<div id="slide2" class="slides">
</div>

<div id="slide3" class="slides">
</div>

...  //around 20 slides

各スライドには背景画像（現在のスライド）があります。このようなもの：

#slide4{
    background: url(../img/ipad/Slide4.PNG) no-repeat;
    z-index:103;  //over the previous slide
    margin-left:-2000px;  //in order to animate it later
}

そして、あるスライド（画像）から別のスライド（画像）に移動するために、私は次のようにjQueryを使用しています。

    //from slide3 to slide4 with animation
$('#slide3').click(function(){
    $('#slide4').show();
    $('#slide4').animate({'margin-left' : '0'});
});

私はすでに画像の重みを減らしてみましたが、かなりの品質を落とさずにそれ以上減らすことができない場合があります。

AJAXを使用して画像を動的にロードする可能性についても考えましたが、動きが非常に速いため、レンダリングされる前に次のスライドをロードするのに十分な時間がありません。

何をお勧めしますか？ありがとう。

4

1 に答える 1

3

iPad / iPhoneでは、jQueryアニメーションではなく、CSS3アニメーション/トランジションを使用して、最高/最もスムーズなパフォーマンスを実現します。CSS3アニメーション/トランジションはネイティブブラウザコードで実装されており、JavaScriptのシングルスレッド化の影響を受けず、他のことをしているときにバックグラウンドでよりスムーズに実行できる場合があります。

これらのCSS3機能に慣れていない場合は、次のサイトから開始できます：http: //css3.bradshawenterprises.com/（チュートリアルを参照）。

于 2013-02-22T16:52:15.290 に答える