jQueryを使用してページに外部画像を非同期的に読み込みたいそして私は次のことを試しました:
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
しかし、常にエラーが返されます。このように画像を読み込むことは可能ですか?
使ってみた.load方法は動作しますが、画像が利用できない場合 (404) にタイムアウトを設定する方法がわかりません。どうすればいいでしょうか?
ベストアンサー1
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);
}
});