画像の遅延ロードとプリロードの詳細な説明

この記事では、画像の遅延読み込みと事前読み込みについて説明します。画像の遅延読み込みと事前読み込みについて知らない場合、または画像の遅延読み込みと事前読み込みについて詳しく知りたい場合は、この記事を見てみましょう。くだらない話はやめて本題に入りましょう！

1. 遅延読み込み

新しいことを理解するときは、何となぜから始めます。つまり、画像の遅延読み込みテクノロジを理解したい場合は、まず遅延読み込みとは何なのかを理解する必要があります。なぜ遅延読み込みを使用する必要があるのですか?

1.1 遅延読み込みとは何ですか?

遅延読み込みは遅延読み込みとも呼ばれます。ページにアクセスするときに、img 要素またはその他の要素の背景画像をデフォルトの画像 (配置画像) に置き換える必要があります。これにより、ブラウザーはページのレンダリング時に一度だけ要求する必要があります。画像がブラウザーの可視領域に表示されると、画像の実際のパスが設定され、画像が表示されます。

1.2 画像の遅延読み込みを使用する理由は何ですか?

各種ショッピングモールサイトや写真素材サイトなど、ページ内の写真の枚数が一定数に達し、写真のサイズが比較的大きい場合。ページが読み込まれるとすぐにすべての画像を読み込むと、明らかに Web サイトの読み込み速度に影響し、サーバーの負荷が増加し、ユーザー エクスペリエンスが確実に悪くなるため、現時点では遅延読み込みを使用できます。 。

1.3 遅延読み込みの具体的な実装原則

ページ内の img 要素が http リクエストを送信する理由は、 src 属性が設定されているためです。設定されていない場合、ブラウザは画像をダウンロードするリクエストを送信しません。まず、プレースホルダー画像を使用してすべての

画像をページ上に配置し、要素の下に src カスタム属性を設定して画像の実際のパスを保存します。必要に応じて、実際のパスを取り出して移動します

。

ステータスがソースに追加されました。

2. プリロード

2.1. プリロードとは何ですか?

プリロードとは、事前に画像をロードすることを意味し、ユーザーが画像を表示する必要があるときにローカル キャッシュから直接レンダリングできます。

2.2 プリロードを使用する理由は何ですか?

ページ上の画像が比較的大きい場合、ページが読み込まれるときに領域が空白になるか、画像の読み込みが遅くなります。ユーザーエクスペリエンスを向上させるために、これらの画像を事前に読み込む必要があります。キャッシュを使用すると、ユーザーがページを開いたときにこれらの画像がすぐに表示され、ユーザー エクスペリエンスが向上します。

2.3の実装方法は何ですか?

方法 1: CSS と JavaScript を使用してプリロードを実装する

方法 2:

JavaScript

のみを使用してプリロードを実装する

方法 3: ajax を使用してプリロードを実装する

3.遅延ロードとプリロードの違いと具体的な実装方法

2つの技術の動作は逆で、1つは事前にロードし、もう1つは遅延ロードまたはロードなしです。遅延ロードはサーバーにとって有益であり、ある程度のプレッシャーを軽減できます

。一方、プリロードするとサーバーの負荷が増加します。

遅延読み込みの具体的な実装方法:

1。1 つ目は、読み込み遅延に setTimeOut または setInterval を使用する、条件付き読み込みです。特定の条件、または特定の イベント
をトリガーして非同期ダウンロードを開始します。

3. 3 番目の方法は、可視領域をロードすることです。つまり、ユーザーが見える領域のみをロードします。これは主にスクロール バーを監視することによって実現され、通常はユーザーの前で一定の距離を置いて実行されます。特定の写真が表示されます
ユーザーが画像をプルダウンしたときに確実に画像が表示されるように、読み込みを開始します。

プリロードの具体的な実装方法:

プリロードを実装するには、次のようなさまざまな方法があります: CSS と JavaScript を使用してプリロードを実装する、JavaScript のみを使用してプリロードを実装する、Ajax を使用してプリロードを実装する。

最も一般的に使用されるメソッドは new Image() です。プリロードを実現するためにその src を設定し、その後、onload メソッドを使用してプリロード完了イベントをコールバックします。ブラウザが画像をローカルにダウンロードしている限り、同じ src がキャッシュされます。これは最も基本的で実用的なプリロード方法です。 Image が画像ヘッダーをダウンロードすると、幅と高さが取得されるため、プリロードする前に画像のサイズを取得できます (メソッド

は、タイマーを使用して幅と高さの変更を循環させることです。

) この記事はここまでです。すべての内容を理解していなくても、両方の側面を自分で簡単にマスターできます。 JSプリロード

ビデオ
オーディオ/ビデオのスクリーンショット共有のヒント

以上が画像の遅延ロードとプリロードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。