0

Webページでparallax.jsを使用しています。

http://www.edizarca.com/karpaz/（ページが更新され、実行可能な解決策が見つかるまで視差が削除されます）

ただし、ページを開いて更新を続けてください。背景画像が不気味（オフ位置）に始まることがあります。私はクロームとファイアフォックスの両方でテストしましたが、なぜこれを行うのか理解できません。

何か考えはありますか？

ありがとう

4

1 に答える 1

0

以下は私が調べて発見したものです。

parallax.jsは、適用される要素の初期トップオフセットを格納します。この値は、と呼ばれる変数に格納されますfirstTop。は、の値と現在のスクロール位置にbackground-position基づいて配置され、 0の場合にのみ0に到達できるようになります[たとえば、96の場合は67を下回らない]。firstTopbackground-positionfirstTopfirstTopbackground-position

注：96については後で詳しく説明します。

そうfirstTopです、常に0であるとは限りません。時々、ゼロ以外の値に到達することができます。ブラウザのキャッシュと関係があるのではないかと思います。

では、価値はfirstTopどこから来るのでしょうか？コードは次のとおりです。

//get the starting position of each element to have parallax applied to it      
$this.each(function(){
    firstTop = $this.offset().top;
});

ここで、offsetはJQueryで定義された関数です。要素をクエリする特定のケースでは、getBoundingClientRectにフォールバックします。だから、そこに問題があるとしたら、それはブラウザのバグでしょう...

したがって、別の方向を見ると...私が得た値は96であり、キャッシュがクリーンアップされた直後です。ブレークポイントでは、灰色の背景とスクロールバーを除いて、まだ何もレンダリングされていません...しかし、ブレークポイントでキャッシュをクリアしていない場合は、ページのレイアウトが表示されます。

約96、idが「header」のdivの高さです。キャッシュをクリーンアップしたかどうかによって、ブレークポイントに到達した瞬間に高さが異なります。キャッシュをクリアした場合は[時々]96、そうでない場合は150です（ただし、IDが「ラッパー」のdivはposition: relativeあり、トップオフセットは0です）。

それで....この振る舞いをどのように説明しますか？

もちろんファイルstyle.css。キャッシュが無効になっている場合、ブラウザはキャッシュを再度ダウンロードする必要があり、その間にjavascriptを実行します。cssが適用される前に、IDが「ラップ」されたdivの位置を読み取る場合、オフセットは正しくありません。もちろん、スタイルがキャッシュからロードされると、すぐに適用され、JavaScriptが誤動作する可能性はありません。

注：firstTopが233で、divの高さが195.875のID「header」である場合もあります。

ソリューション？知らない。parallax.jsは、固定の初期オフセットを設定するための何らかの方法を可能にする可能性があると思います。（コードが立っているときに初期オフセットを設定する方法はありません）。

スタイルをチェックできるライブラリを探すことができます。（注：JavaScriptでスタイルを読み取ることは、ロードされても適用されない可能性があるため、機能しません）。

もし私があなたなら、parallax.jsを変更します（または別のバージョンを試します）。parallax.jsを変更する必要はありません。

編集1：

次のことを試してください。

  • defer属性を使用してコードを実行します。
  • setTimeoutを使用してみてください

アイデアは、ブラウザに視差の初期化を「少し遅れて」実行させて、cssを適用するが、ユーザーがページの操作を開始する「遅すぎる」ことはしないようにすることです。

編集2：

  • javascriptの前にスタイルを配置します（またはドキュメントの最後にjavascriptを配置します）。
  • parallax.jsを実行する$(document).loadのではなく使用する$(document).ready
于 2013-03-26T16:18:16.183 に答える