ホームページ >ウェブフロントエンド >jsチュートリアル >js のプリロードと JavaScript Image() オブジェクトの使用法の概要_JavaScript スキル
js のプリロードと JavaScript Image() オブジェクトの使用法の概要_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:02:511224ブラウズ
プリロードと JavaScript Image() オブジェクト
高解像度の画像を大量に使用すると、Web サイトが本当にきれいになります。しかし、サイトの速度が遅くなる可能性もあります。画像はファイルであり、ファイルは帯域幅を使用し、帯域幅は遅延に直接関係します。画像のプリロードと呼ばれる手法を使用して Web サイトを高速化する方法を学びましょう。
画像のプリロード
ブラウザが画像をロードする場合、画像の HTTP リクエストは次のいずれかで送信されます。 を使用します。タグ、またはメソッド呼び出し経由で。 JavaScript スクリプトを使用して、マウスオーバー イベントでの画像の交換、または一定期間後の画像の自動的な変更を処理する場合、サーバーから画像を取得する間に数秒から数分待つ必要がある場合があります。これは、低速のインターネット接続を使用している場合、取得しようとしている画像が非常に大きい場合、またはその他の状況に特に当てはまります。この場合、遅延によって期待した結果が得られなくなります。
一部のブラウザでは、画像をローカル キャッシュに保存して、後続の画像への呼び出しをすぐに実行できるようにするなど、この問題を軽減するための措置を講じていますが、画像が最初に呼び出されるときには依然としていくつかの問題が発生します。 。 遅れ。プリロードは、画像が必要になる前にキャッシュに画像をダウンロードする方法です。こうすることで、画像が実際に必要になったときに、キャッシュから取得してすぐに表示できます。
Image() オブジェクト
画像をプリロードする最も簡単な方法は、JavaScript で新しい Image() オブジェクトをインスタンス化し、ロードする必要がある画像の URL を渡すことです。パラメータ。 Heavyimagefile.jpg という画像があり、ユーザーがすでに表示されている画像の上にマウスを置いたときにこの画像を表示したいとします。応答時間を短縮するためにこの画像をプリロードするには、単に Image() オブジェクトの HeavyImage を作成し、それを onLoad() イベント ハンドラーに同時にロードします。
head>
<スクリプト言語 = "JavaScript">
関数 preloader()
heavyImage = new Image();
heavyImagefile.jpg 🎜>}
