12

swipe.js ( http://swipejs.com ) を使用して、タブレットとデスクトップ用の HTML5 マガジンを作成しています。

すべてが正常に機能しているようです.1つのHTMLページで、フルスクリーンのリスト要素を並べて設定しました. 雑誌全体が 1 つの静的な html ファイルで構築されます。タブレットではスワイプし、デスクトップ バージョンではボタンを使用してページをスライドできます (swipe.js ホームページの例を考えてみてください。ただし、フルスクリーン スライドを使用します)。

ページは互いに隣り合って配置され、画面のサイズを持っています。

[ |0||1||2| .. |i-1||i||i+1| .. |n| ]

swipe.js トランジションは、translate3d() css 関数を使用して、css3 の助けを借りて行われます。この場合、ハードウェア レンダリングが使用されます。

デスクトップ（Chrome、Safari、FF）、iPad1、および（さらに良い）iPad2では、これは私が探していた望ましい効果をもたらします。スムーズな移行。完全！ただし、iPad3 では、最初に (遷移によって) 入力したときに、ページのレンダリングが「遅い」ように見えます。背景画像 (色のみ) を設定しなくても、遷移したページの「レンダリング」は少し「遅い」と見なされます。ページは「ちらつき」ブロックによって構築されます。

仮定: 私の仮定は (件名を読んだ後)、これはブラウザが画面内にある要素のみをレンダリングし、スワイプされたページをしばらくの間だけキャッシュし、後でキャッシュを消去してメモリ管理を制御するためであると考えています。

私の質問: オフスクリーン レンダリングとキャッシュを制御して、ページ要素 i-1、i+1 を強制的に (事前に) レンダリングし (そして他のすべてのページ要素のキャッシュをフラッシュして)、移行を高速化する方法はありますか?レンダリング？

注: StackOverflow に関するいくつかのトピックで、css3 トランジションの「ちらつき」が言及されています。提案された CSS トリックを実装しましたが、私の場合は解決しません。

-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
4

2 に答える 2

4

最終的に解決策は Swipejs のハックで、メソッド 'hideOthers()' を追加し、スタイルの可視性を 'hidden' に設定して、ハードウェア メモリからページをアンロードしました。

hideOthers: function(index) {
  var i = 0;
  var el;

  for( i in this.slides ) {
      el = this.slides[i];
      if ( el.tagName == 'LI' ) {
          // Show pages i-1, i and i+1
          if ( parseInt(i) == index
             || (parseInt(i) + 1) == index
             || (parseInt(i) - 1) == index
          ) {
              el.style.visibility = 'visible';
          }
          else {
              el.style.visibility = 'hidden';
          }
      }
   }
}

..そして、「slide()」メソッドの最後の行として以下のトリガーを追加しました

// unload list elements from memory
var self = this;
setTimeout( function() { self.hideOthers(index); }, 100 );

ハードウェア アクセラレーションをオンに切り替えるには、translate3d のみが必要でした (上記の質問で述べたように)。

-webkit-transform:translate3d(0,0,0);

結果 (垂直スクロールの iScroll を含む) は、こちら で確認できます。

于 2013-09-12T18:15:01.437 に答える
0

ハードウェア アクセラレーションをトリガーするために使用される webkit backface/translate3d props に関して、iOS 6 以降ではこれらが以前のバージョンとまったく同じように機能しないこと、および (さらに重要なことに) ハードウェア アクセラレーションを適用する必要があることを読みました。アニメーション化されている要素だけでなく、それが重なっている/重なっている要素でも。

参照 (あまりありません): http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

公平を期すために、これはかなり逸話的な話ですが、締め切りが厳しかったため、ちらつきの問題を自分で修正できませんでしたが、これは正しい方向へのポイントかもしれません.

于 2013-08-27T23:17:09.990 に答える