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 サイトの他の関連記事を参照してください。