jQuery を使用して画像を非同期的に読み込むにはどうすればよいですか?

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

非同期読み込み技術は、ページの速度を低下させる可能性のあるリクエストのブロックを防ぎ、Web ページのパフォーマンスを向上させるために重要です。レンダリング。この手法は、読み込みに時間がかかり、ユーザー エクスペリエンスが不安定になる可能性がある外部画像を読み込む場合に特に役立ちます。

非同期画像読み込みの一般的なアプローチの 1 つは、$.ajax() メソッドを使用することです。ただし、このメソッドはデータの取得用に設計されており、特に画像処理用に最適化されていないため、画像のロードには適していない可能性があることに注意してください。

代替アプローチ: 画像要素を使用する

jQuery を使用して画像を非同期的に読み込むより効率的な方法は、新しい画像要素を動的に作成することです。これを実現する方法は次のとおりです。

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);
        }
    });

このコードは次のことを実行します。

1. 新しい HTML 画像要素 ($("") を作成し、 src 属性を目的の画像 URL に設定します。
2. 画像の読み込みが完了するとトリガーされる「load」イベントのイベント リスナーを追加します。
3. 読み込みハンドラー内で、次のことを確認します。画像は完全にロードされ、そのサイズは有効です。
4. 画像が正常にロードされた場合、画像要素が「something」という ID を持つ DOM 要素に追加されます。

カスタム タイムアウトの実装

このアプローチには、考えられる 404 エラーの処理に不可欠なタイムアウト設定が含まれていません。カスタム タイムアウトを実装するには、次のコードを組み込むことができます:

var timeout = setTimeout(function() {
    alert('Image timed out');
}, 5000); // 5 seconds timeout

img.on('load', function() {
    clearTimeout(timeout); // Clear the timeout once the image loads
});

このコードを前のスニペットに追加すると、指定したタイムアウト (この場合は 5 秒) 以内に画像が読み込まれない場合に、タイムアウトを示すアラートが表示されます。

以上がjQuery を使用して画像を非同期的に読み込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。