jQuery を使用して画像を非同期で読み込む方法: ステップバイステップ ガイド

jQuery を使用した非同期画像の読み込み

Web ページ上の画像の読み込みと表示を調整すると、そのパフォーマンスに大きな影響を与える可能性があります。画像を非同期的に読み込むと、画像の読み込みの順序とタイミングを制御できるため、ユーザー エクスペリエンスへの影響が最小限に抑えられます。多用途の JavaScript ライブラリである jQuery は、画像の読み込みなどの非同期タスクを処理するための便利なメソッドを提供します。

XMLHttpRequest を使用した非同期画像の読み込み

画像を非同期的に読み込む 1 つの方法は、次のとおりです。 XMLHttpRequest (XHR) オブジェクトを利用します。ただし、この方法では、特にエラーが発生した場合や 404 応答をキャッチするためにタイムアウトを設定した場合に課題が生じます。

代替方法: 画像要素の操作

非同期ロードのためのより信頼性の高い方法画像には、img 要素の作成、そのソース属性の画像 URL への設定、およびその読み込みイベントの監視が含まれます。このイベント駆動型のアプローチにより、読み込みエラーの処理と画像の利用可能性の確認をより詳細に制御できます。

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('Broken image!');
        } else {
            $("#something").append(img);
        }
    });

このコード スニペットでは、

• 新しい img 要素が作成され、そのソースは次のようになります。目的の画像 URL に設定します。
• on('load') イベント リスナーは img 要素にアタッチされ、画像が完全に読み込まれると呼び出されます。
• イベント リスナー内で、complete、naturalWidth、naturalHeight プロパティがチェックされ、画像が正常に読み込まれたかどうかが検証されます。これらの条件のいずれかが満たされない場合、エラー メッセージが表示されます。
• 画像が正常に読み込まれると、その画像は所定の
  に追加されます。 ID「something」を持つ要素。

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