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

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

WBOY

リリース： 2016-05-16 17:39:03

オリジナル

1177 人が閲覧しました

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

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

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

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

head>
<スクリプト言語 = "JavaScript">
関数 preloader()
heavyImage = new Image();
heavyImagefile.jpg 🎜>}