0

ページの準備ができ次第、ページ上の特定の ID にジャンプするコードがあります。がターゲット要素にくるjquery.animate()ようにa を実行することでこれを達成します。scrollTop

ただし、私は Web フォントを使用しています。何らかの理由で、Web フォントが読み込まれて適用される前にreadyイベントが発生します。その結果、スクロールしたい要素の実際の位置とはまったく関係のない位置でアニメーションが終了することがよくあります。

これを確認するには、Chrome インスペクタでタイムラインを開くと、アニメーションのトリガー、Web フォントの読み込み、再レンダリングが行われ、アニメーション ターゲットのスクロール ポイントが無意味になります。また、システム フォントを使用している場合、この問題が発生しないことも確認しています。

誰かアドバイスをいただけますか？おそらく、Web フォントが適用された後に何らかのイベントが発生するのでしょうか?

4

2 に答える 2

1

.ready は DOM がロードされた後にのみ使用されるため、代わりに .load を使用してみてください。

$(window).load(function () {
  // run code
});

.ready() が必要なものではない理由に関する情報は次 のとおりです:
http://api.jquery.com/ready/

読み込まれるリソース):
http://api.jquery.com/load-event/

于 2013-08-18T02:24:25.770 に答える
1

$(document).ready(...)ブラウザがページのHTML全体のダウンロードを終了したときにトリガーされます。多くの場合、ブラウザがスタイルシートのダウンロードを完了する前に、フォント ファイルはもちろんのことです。

HTML に含まれるスタイルシート (JavaScript で追加されたスタイルシートではなく) から読み込まれると仮定すると、ドキュメントの読み込みイベントではなく、ウィンドウ イベントをリッスンする必要があります。

$(window).on('load', function(){
    // your resources are loaded
});
于 2013-08-18T02:18:44.510 に答える