2012-02-29 6 views
0

スライダー付きのウェブサイトがあります。スライダには、いくつかの画像と非表示のビデオが含まれています。特定の「ホールドフレーム」をクリックすると、画像が非表示になり、動画が再生されます。SlidesJSスライダーが低速でiOSで跳ね上がります

これは、コンピュータとすべてのブラウザで正常に動作します。しかし、iOSで試してみるとすぐに、トランジションアニメーションは非常に遅くなり、まったく起こりません。多くの場合、iPad上では移行が全くありません。黒いスペースのちょうど2分の1、新しいスライド。

私はスライダーをJUSTでテストサーバー上にスライダーを再構築しました。それは私のサイトにあるものとまったく同じですが、ページ上の唯一のものです。これをiOSから見ると、うまくいきます!トランジションは滑らかで、私がそれらをどのように意図したかです。

は、これはあなたがここにサイトを閲覧することができます

...しかし、唯一のiOSの、遷移に干渉している私のオリジナルのウェブサイト上の他の何かがあるかもしれないと信じて私をリード。 http://optidesign.squarespace.com/projects/motorola-sf700.html

誰もが試して見て、私にいくつかの洞察力を与えることができれば、それは素晴らしいだろう。それ以外の場合、私の考えは、テストサーバー上のサイトをゆっくりと再構築し、どこが壊れているかを確認することです。または、別のスライダーを試してみてください。しかし、Slidesjsが私のために最高の仕事をしました。

ありがとうございました

編集:もうちょっと興味深いビットに気付きました。 「ホールドフレーム」を押してビデオを表示すると、そのスライドから次のスライドへの移行がスムーズです!しかし、戻ってもまだ壊れていて、残りのスライドは壊れたままです...

編集:これを引き起こす原因は何もありません。

答えて

0

DOM内の要素が多いほど、特に要素を物理的に変換/移動するときは、DOMを操作するのがより遅いjavascriptになります。これは、スライダがそれ自体ではうまくいくが、その場でつまずく理由を説明する。

希望の効果を得るには、CSSトランジションを使用することを強くお勧めします。 http://www.idangero.us/sliders/swiper/

transform3dと組み合わせて、要素の「スライド」をiOSでハードウェアアクセラレーションし、非常にスムーズにすることができます。