5

この投稿は、ページ間を移動するときにちらつくという私の問題の解決策であると信じてい ます。具体的には：

$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});

私は C# の世界から来ており、jQueryモバイルについてはほとんど無知です。このスニペットを追加したいのですが、どこにあるのかわかりません。それが問題なら、私はそれを追加すると思いますが、それjquery.mobile-1.1.0.rc.1.jsが正しいファイルである場合、そこのどこにあるのかわかりません。

4

2 に答える 2

14

このコードは、jQuery Core を組み込んだ後、jQuery Mobile を組み込む前に実行する必要があります。その理由は、コードを実行するには jQuery が存在する必要がありますが、このイベント ハンドラーは jQuery Mobile が初期化される前にバインドされる必要があるためです。

例えば：

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

ドキュメント: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

また、jQuery Mobile は CSS 3D 変換のサポートについてデバイスをテストし、それらをサポートするデバイスでのみナイス トランジションを使用するため、UA スニッフィングは必要ありません。これは jQuery Mobile 1.1.0+ で自動的に行われますが、デフォルトのフォールバック トランジションは であるfadeため、とにかくそのデフォルトを変更する必要があります。

非 3D サポートのためのフォールバック トランジションの定義

デフォルトでは、フェードを除くすべてのトランジションで 3D 変換のサポートが必要です。3D をサポートしていないデバイスは、指定されたトランジションに関係なく、フェード トランジションに戻ります。これは、Android 2.x などのパフォーマンスの低いプラットフォームを高度な移行から積極的に除外し、引き続きスムーズなエクスペリエンスを確保するために行います。3D 変換を技術的にサポートしている Android 3.0 などのプラットフォームがありますが、それでもアニメーションのパフォーマンスは低いため、すべてのブラウザーで 100% ちらつきがなくなることは保証されませんが、責任を持ってこれをターゲットにしようとしています。

3D 変換をサポートしていないブラウザーのフォールバック トランジションは、トランジション タイプごとに構成できますが、デフォルトではフォールバックとして「フェード」を指定します。たとえば、これはスライドアウト トランジションのフォールバック トランジションを「なし」に設定します。

$.mobile.transitionFallbacks.slideout = "none"

ソース: http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

一般的な観察として、イベント ハンドラー内にステートメントを配置することに気付きました。if/thenそれが Android デバイスでない場合は、イベント バインディング/起動が発生する必要がないように、ステートメントを外部に配置することもできます。

例えば：

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
if (navigator.userAgent.indexOf("Android") != -1)
{
    $(document).bind("mobileinit", function()
    {
      $.mobile.defaultPageTransition = 'none';
      $.mobile.defaultDialogTransition = 'none';
    });
}
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
于 2012-05-01T16:48:43.313 に答える
0

私は同じ問題を抱えていますが、オンラインの解決策はどれも機能していないようです。私は Android 2.3.6 を搭載した Galaxy Mini でテストしていますが、UX の点ではフェードもひどかったです。

私のコードをいじってみると、運が悪かったので、これによりパフォーマンスがいくらか向上したことがわかりました

$(document).on("mobileinit", function(){
        $.mobile.defaultPageTransition = 'slide';
        $.mobile.transitionFallbacks='none';
});

そして、まるで奇跡のように、ちらつきはありません。たまにグリッチが発生しますが、以前よりは確実に良くなっています！

于 2012-12-30T19:57:30.963 に答える