現在、jQuery を使用してスクロールをアニメーション化する 1 ページの Web サイトを構築しています。jQuery Ajax を使用して埋め込まれた Tumblr ブログがあります。ブログにすべての画像が読み込まれると、スクロール アニメーションに遅れが生じます。
これを支援する方法として、scrollTop が特定の範囲内またはブログ内になるまでブログをロードせず、ユーザーが少なくとも 0.5 秒間スクロールしていない場合にのみロードします (過去にスクロールしたときにトリガーを停止するため)。要素)
ただし、私が言ったように、画像が読み込まれると、スクロールが遅くなります。表示されていないときに画像を非表示にし (既に読み込まれている)、ユーザーがスクロールしていないときにのみ表示する最良の方法は何ですか? このようにして、スクロールアニメーションがそれらを通り過ぎても非表示のままになりますか?
あなたは単に使用することができますjQuery("#your-image").hide();
しかし、おそらくあなたが抱えている問題は、ブラウザのキャッシュ リークです。したがって、DOM から画像を削除することもできますが、ユーザーがスクロールするたびに画像を再読み込みする必要があり、大量のデータ転送が行われます。したがって、単純に jQuery の関数を使用することをお勧めしますhide()が、これではキャッシュの問題は解決されません。
Google Chrome を起動して、提供されている開発者ツールを使用することをお勧めします。f12キーボードを押して、 を見てくださいTimeline。上から 3 番目のタブ (左側) で選択できますmemory。これは非常に高いですか? このような Web サイトの大きな危険は、メモリ オーバーフローです。これは、JavaScript ガベージ コレクターがすべてのunusedオブジェクトを削除できないことを意味します。したがって、これを正しく行うようにしてください。
編集: Smashing Magazine の facebook ページでこの記事を見つけました。興味深い読み物になるかもしれません。
おそらく、現在表示されていない画像を置き換えるために、低解像度または縮小された画像を使用できます。次に、scrollTop によってそれらが表示されるようになったら、それらの画像の高解像度バージョンをリロードできます。理想的には、ユーザーが両方のバージョンをキャッシュして、低解像度の画像が 0.5 秒間しか表示されないようにする必要があります。