jQueryを使用して画像を非同期的にロードできますか?

jQuery を使用した非同期イメージのロード

質問:

外部イメージを非同期的にロードしようとしています次のようなjQueryを使用しますcode:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

はエラー応答になります。 jQueryで画像の非同期読み込みは可能でしょうか？そうでない場合、画像を非同期に読み込むにはどうすればよいですか?

解決策:

画像の非同期読み込みは、jQuery を使用すると確かに可能です。ただし、$.ajax() メソッドはこのタスクには適していません。代わりに、新しい画像要素を動的に作成し、それにイベント ハンドラーをアタッチすることをお勧めします。

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

このメソッドは、ネイティブ HTML5 画像読み込みメカニズムを使用し、画像が完全に読み込まれたときに読み込みイベントをトリガーします。ロードされています。 complete、naturalWidth、naturalHeight プロパティをチェックすることで、画像が正常に読み込まれたかどうかを確認し、破損した画像の警告を防ぐことができます。

以上がjQueryを使用して画像を非同期的にロードできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。