1. ホーム
  2. javascript

[解決済み] jQueryで画像を非同期に読み込む

2022-05-06 18:42:18

質問

jQueryを使って外部画像を非同期でページに読み込みたい で、以下を試してみました。

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

   },
   error: function(r,x) {

   }
});

しかし、それは常にエラーを返します、それはこのように画像をロードすることが可能ですか?

を使おうとしたのですが .load メソッドとそれは動作しますが、私は画像が利用できない場合(404)、私はタイムアウトを設定することができますどのように考えています。どうすればいいのでしょうか?

解決方法は?

ajaxは必要ありません。新しい画像要素を作成し、そのsource属性を設定し、読み込みが終わったらドキュメントのどこかに配置すればよいのです。

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