jQueryの質問です。

画像単体のブラウザでの読み込みに20~30秒かかる画像(下記hoge.jpg)を
jQueryで動的に表示しようとすると、まったく表示されません。
(画像単体で読み込みに時間がかからないものなら、問題なく表示できます)

解決策があれば教えてください。なるべくシンプルなものほどうれしいです。

url = "http://example.com/hoge.jpg";
$('body').append( '<img src="" id="foo" />' );
$("#foo").attr( 'src', url );

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/10/07 15:24:41
  • 終了:2010/10/14 15:25:03

回答(2件)

id:watarum No.1

watarum回答回数63ベストアンサー獲得回数162010/10/07 18:42:03

ポイント35pt

jQuery.ajax(options)で設定されているタイムアウトが短い可能性が高いです。下記を参考にどんなエラーが帰ってきているか調べてみて下さい。

http://allabout.co.jp/gm/gc/24218/

もしタイムアウトであった場合、

timeoutを60秒くらいに設定してあげて下さい。

$.ajaxTimeout(60000);

タイムアウトはミリ秒で設定しますので、

1000で1秒ですから60000で60秒です。

実際にそんなに重い画像を開くのは現実的でない気がしますが。。

id:P-mako

タイムアウト設定を変更してもうまくいきません。

明示的な非同期通信でないと有効な設定ではないのではないでしょうか?(違っていたらすみません)

また現実的ではないのは同感ですが、ログインしなければ取得できないURLで、

かつ該当サービス(サーバ)が、驚くほど重いので、やむを得ないんです。

サーバサイドでログイン状態を保持しながらというサンプルも過去に見た記憶が

ありますが、そこまで本格的に対処するほどでもなく、できればjQueryで

手軽に実現できなかと思っていたのですが。

2010/10/13 09:07:58
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922010/10/07 18:50:45

ポイント35pt

質問文からではjQueryが原因なのかどうかわかりませんが、ひとまず「画像のプリロード」を試してみてはどうでしょう。

あとコメント欄を有効にしたほうが有益です。

var url = 'http://example.com/hoge.jpg';
var img = new Image();
img.id = 'foo'
img.src = url;
img.onload = function(){
  document.body.appendChild(img);
}


// jQueryでたぶん同じコード
var url = 'http://example.com/hoge.jpg';
$('<img id="foo">').attr('src', url).load(function(){
  $('body').append(this);
});

画像のプリロード - Google 検索

id:P-mako

プリロードも期待どおりの結果は得られませんでした。

1番目の回答者さんのタイムアウトとURLにあるエラーハンドリングも実装しましたが、

いずれもNGでした。(エラーハンドリングはコールバックしません)

ちなみに、.loadの無名関数へのイベントフックは、通常の画像であれば問題なく

コールされています。

また、時間がかかるURL(画像)についても、単体でブラウザで表示する分には相当

時間がかかりますが、表示されます。(というのは質問文にも書いてありましたね)

2010/10/13 09:10:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません