jQuery を使用した非同期画像読み込みのタイムアウトを設定するにはどうすればよいですか?

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

ページのレンダリングのブロックを回避し、スムーズなユーザー エクスペリエンスを確保するには、画像を非同期的に読み込むことが不可欠です。 $.ajax() は非同期操作に役立つツールですが、画像の読み込み用に明示的に設計されていません。

jQuery の .load メソッドの使用

jQuery は便利な .load メソッドを提供します。画像を含む外部コンテンツをロードできるload()メソッド。ただし、.load() を使用して画像読み込みのタイムアウトを設定するのは簡単ではありません。

ネイティブ画像要素を使用する代替方法

別のアプローチは、新しい画像要素を作成することです。直接実行して、そのソース属性を設定します。これにより、イメージの読み込みをより柔軟に処理できるようになります。

タイムアウトの設定

非同期イメージの読み込みのタイムアウトを設定するには、次の手順に従います。

1. イメージを作成する要素:

   var img = $("<img />");

2. ソース属性を設定します:

   img.attr('src', 'http://somedomain.com/image.jpg');

3. ハンドル負荷イベント:

   img.on('load', function() {
       // Checks if the image has loaded successfully
       if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
           // Image failed to load
           alert('broken image!');
       } else {
           // Image loaded successfully
           $("#something").append(img);
       }
   });

画像が正常に読み込まれたら、HTML 内の目的の場所に画像を追加できます。画像のロードに失敗した場合 (例: 404)、適切と思われる方法でエラーを処理できます。

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