js は画像オブジェクトを使用して画像をプリロードし、アクセス速度を向上させる_javascript スキル

高解像度の画像を大量に使用すると、Web サイトが本当に明るく見えるようになります。ただし、サイトのアクセス速度も遅くなります。写真はファイルであり、ファイルは帯域幅を占有し、帯域幅はアクセスの待ち時間に直接関係します。ここで、画像のアクセス速度を向上させるための画像のプリロードと呼ばれる小さなトリックを学びましょう。

一部のブラウザは、これらの画像をローカル キャッシュに保存することでこの問題を回避しようとします。これにより、イメージを順番に呼び出すことができますが、イメージを初めて使用するときはまだ遅延が発生します。プリロードは、画像が必要になる前にキャッシュにダウンロードする技術です。このようにして、画像を本当に表示する必要があるときに、キャッシュからすばやく復元し、すぐに表示することができます。

Image() オブジェクト
画像をプリロードする最も簡単な方法は、JavaScript を使用して新しい Image() オブジェクトを作成し、プリロードする画像の URL を渡すことです。このオブジェクトに。 Heavyimagefile.jpg という名前の画像ファイルがあり、ユーザーがマウス ポインタを既存の画像の上に移動したときにこのファイルが表示されるようにしたいとします。このファイルをより速くプリロードするには、heavyImage という名前の新しい Image() オブジェクトを作成し、それを onLoad() イベント ハンドラーを通じてページに同期的にロードします。

コードをコピー コードは次のとおりです。

head>

関数 preloader()
heavyImage = new Image();
heavyImagefile.jpg 🎜>}