jqueryで画像を非同期で読み込む方法

フロントエンド開発において、画像はよく使われるコンテンツの一つですが、ページによっては大量の画像を一度に読み込むとページの反応が遅くなり、ユーザーエクスペリエンスが低下する場合があります。ページのパフォーマンスを最適化するには、非同期読み込みテクノロジーを使用する必要があります。 jQuery は、画像を非同期的に読み込むための便利なメソッドを提供する優れた JavaScript ライブラリです。

jQueryで画像を非同期で読み込む方法を紹介します。

1. 画像の遅延読み込み

遅延読み込みとは、ユーザーが表示領域までスクロールした場合にのみ画像を読み込むことを意味します。このテクノロジーにより、ページ読み込みパフォーマンスが最適化され、ユーザー エクスペリエンスが向上します。

jQuery で遅延読み込みを実装するには、lazyload プラグインを使用できます。これは、大量のコードを必要としない軽量のプラグインであり、遅延読み込みが必要なイメージに指定したクラスを追加し、プラグイン メソッドを呼び出すだけで済みます。

手順は次のとおりです:

1. Lazyload プラグインをダウンロードし、jQuery ライブラリを導入します。

2. 以下に示すように、HTML で遅延ロードする必要がある画像に class 属性を追加します:

<img class="lazyload" data-src="image.png">

3. JavaScript で Lazyload メソッドを呼び出し、画像のクラスを指定します。遅延ロードする必要があります。

$(function(){
    $("img.lazyload").lazyload();
});

イメージの実際のアドレスは、src 属性ではなく data-src 属性で指定する必要があることに注意してください。この方法では、元の画像アドレスはすぐにはロードされませんが、必要なときにロードされます。

2. 画像のプリロード

プリロードとは、必要な画像を事前にロードすることで、必要なときにネットワークリクエストを行わずにキャッシュされた画像を直接使用します。この手法により、ページの表示速度とユーザー エクスペリエンスが向上します。

jQuery で画像をプリロードするには、preload メソッドを使用できます。コードは次のとおりです:

$.preload = function(){
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
        $("<img>").attr("src", arguments[i]);
    }
}

このメソッドは複数の画像アドレスをパラメータとして受け取り、jQuery を使用して動的に img タグを作成しますそして、プリロードする必要があるイメージアドレスとして src 属性を指定します。このようにして、これらの画像を表示する必要がある場合、ネットワーク要求を行わずにローカル キャッシュから直接画像を取得できます。

このメソッドは、ページの読み込み時に呼び出すことができます。例:

$.preload("image1.png", "image2.png", "image3.png");

画像のプリロードの効果は明ら​​かではありませんが、ネットワークの状態が悪い場合に画像の表示を効果的に高速化できます。 。

3. 画像の遅延読み込み

遅延読み込みとは、ページが読み込まれた後に必要な画像を非同期で読み込むことを意味します。このテクノロジーにより、最初の画面のすべての画像が読み込まれてページの読み込みが遅くなることが回避されます。

jQuery で遅延読み込みを実装するには、遅延読み込みとプリロードの 2 つのテクノロジを組み合わせて、遅延読み込みと同様の効果を実現できます。

遅延読み込みは、ページの読み込み後に画像を非同期で読み込む必要があるため、遅延読み込みより効果が低いことに注意してください。

概要

画像の非同期読み込みにより、ページ読み込みパフォーマンスを効果的に最適化し、ユーザー エクスペリエンスを向上させることができます。 jQuery で画像の非同期読み込みを実装するには、遅延読み込み、事前読み込み、遅延読み込みの 3 つのテクノロジを使用できます。これらのテクノロジには、さまざまなシナリオで利点があります。

遅延読み込みにより、一度に大量の画像を読み込んでページの応答が遅くなるのを回避し、ページの表示速度とユーザー エクスペリエンスを向上させることができます。プリロードにより、画像の表示速度が向上し、ネットワーク要求による待ち時間を回避できます。遅延読み込みでは、遅延読み込みと事前読み込みの利点を組み合わせて、ページの読み込み後に画像を非同期的に読み込むことで、最初の画面のすべての画像の読み込みによって引き起こされるページの応答の低下を回避できます。

以上がjqueryで画像を非同期で読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。