私はスタックオーバーフローとプログラミングが初めてなので、ぎこちない言い回しを許してください!
グラフィックが豊富で、サイズが 680x9400px の横スクロール Web サイトを構築しています。http://sursly.comのようなクールな横スクロール効果を作成するために、いくつかの JavaScript や mootools を使用します。
使用するすべての画像を Web で最適化していますが、ページの読み込みを高速化する方法について他のアイデアがあるかどうか知りたいですか? たとえば、水平セクションでサイトをプリロードする方法はありますか?
前もって感謝します。
jQuery Lazy Loading Pluginのようなものを使用すると、目に見える画像のみが読み込まれるため、体感速度が向上します。したがって、オフスクリーンの画像と競合することはありません。
おそらく mootools を使用することになると思いますが、似たようなものがなかったら驚きです。
Sursly サイトのほとんどのグラフィックは純粋な白黒であることに注意してください。これにより、ファイルを最適化できるため、サイトの読み込みが劇的に速くなります。
過去の回答に同意しますが、それを少し変更します。必要に応じてロードするのではなく、可能なときにロードします。つまり、最初は最初のページだけをロードします。それがロードされたら、2 番目、3 番目、というようにロードします。
まだロードされていないパーツとロードされていないパーツを追跡し、ロードされていない「ページ」が要求された場合は、「お待ちください」サインを表示し、そのページを優先キューに上げます。
検索エンジンによるインデックス作成に関心がある場合は、これらの手法に注意してください。
これを行うほとんどの Web サイトは、Google マップと同じように機能します。それらは世界 (またはあなたの場合は、仮想横スクロール ページ) をタイルに分割します。ユーザーがスクロールすると、AJAX を使用して次のタイルが読み込まれ、ユーザーが現在表示されているタイルの端に到達すると表示されます。
必要に応じて、まだ表示されていない複数のタイルを両側に読み込むことができますが、ユーザー エクスペリエンスを向上させるには、クライアント側のメモリがより多く必要になります。